この記事にはプロモーションが含まれています。

【Web制作シリーズ】HTML構造を理解しよう！セマンティックタグとフォーム作成

2025-08-042025-08-10

Web制作学習シリーズの第4回目です！今回は、「なぜ動くのかを理解する」 理論と実践の融合編です！これまで体験的に学んできたHTMLについて、その構造と意味を深く理解し、プロフェッショナルなHTML構造のポートフォリオサイトを作成します。

前回までの記事を終えて、

ケケンタ

体験はできたけど、なぜ動くのかわからない…

このような疑問が湧いてきていませんか？

基礎を固めて、あなたのWeb制作スキルを次のレベルへ！ このシリーズを通して、最終的には完全な自己紹介サイトが完成します。

この記事でできるようになること

HTML5の基本構造を完全理解
セマンティックタグでSEOとアクセシビリティを向上
プロフェッショナルなフォーム要素の作成
検索エンジンに優しいHTML構造

この記事で完成するもの

完全なHTML構造のポートフォリオサイト（セマンティックタグ、フォーム、メタタグ対応）
※CSSは次回（第5回）で完成予定です。

シリーズの進行:
第1-3回で体験的に学んだ内容を、今回は理論的に深く理解。これでHTMLの基礎が完成！次回はCSSのレイアウト技術を学んで、さらに高度なWebサイトを作成します！

シリーズ目次

前回の記事

【Web制作シリーズ】CSSでWebページを美しく！色・フォント・レイアウトの基本

Webアニメーションの引き出しを増やすのにおすすめの書籍

動くWebデザインアイディア帳

created by Rinker

¥1,399 (2025/08/11 08:44:57時点 Amazon調べ-詳細)

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら

連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

Laravelの教科書バージョン10対応【Laravel11サポートガイドあり】

created by Rinker

¥1,499 (2025/08/12 03:12:59時点 Amazon調べ-詳細)

学習目標

この記事で身につくスキル

HTML5の基本構造の理解
セマンティックタグの使い方
フォーム要素の作成
アクセシビリティの考慮

HTML5の基本構造を理解しよう

DOCTYPE宣言の意味

これまで使ってきたHTMLファイルの最初の行について詳しく見てみましょう。

<!DOCTYPE html>

この行は「この文書はHTML5で書かれています」という宣言です。ブラウザに「HTML5のルールで解釈してください」と伝えています。

なぜ必要なのか？

古いブラウザでも正しく表示される
ブラウザが適切なレンダリングモードを選択する
検索エンジンが正しく理解できる

html、head、bodyの役割

HTMLファイルの基本構造を詳しく見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>私のポートフォリオ</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- ここにページの内容が入ります -->
</body>
</html>

各要素の役割

<html> タグ

HTML文書のルート要素
lang="ja" で日本語であることを明示
アクセシビリティとSEOに重要

<head> タグ

ページの設定情報を格納
ブラウザには表示されない
メタデータ、CSS、JavaScriptの読み込み

<body> タグ

実際にブラウザに表示される内容
ページの本文を格納

メタタグの重要性

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Webデザイナー田中太郎のポートフォリオサイトです">
    <meta name="keywords" content="Webデザイン,ポートフォリオ,HTML,CSS">
    <title>田中太郎 - Webデザイナー</title>
</head>

重要なメタタグ

charset="UTF-8": 文字エンコーディング（日本語表示に必須）
viewport: モバイルデバイスでの表示設定
description: 検索結果に表示される説明文
keywords: 検索エンジン向けのキーワード

セマンティックタグで構造化しよう

セマンティックタグとは

セマンティックタグは「意味のある」タグです。単に見た目だけでなく、その内容が何を表しているかを明確にします。

従来の書き方（非セマンティック）

<div class="header">
    <div class="nav">
        <ul>
            <li><a href="#home">ホーム</a></li>
            <li><a href="#about">自己紹介</a></li>
        </ul>
    </div>
</div>

セマンティックタグを使った書き方

<header>
    <nav>
        <ul>
            <li><a href="#home">ホーム</a></li>
            <li><a href="#about">自己紹介</a></li>
        </ul>
    </nav>
</header>

主要なセマンティックタグ

`<header>` – ヘッダー

<header>
    <h1>田中太郎</h1>
    <p>Webデザイナー</p>
</header>

`<nav>` – ナビゲーション

<nav>
    <ul>
        <li><a href="#home">ホーム</a></li>
        <li><a href="#about">自己紹介</a></li>
        <li><a href="#works">作品</a></li>
        <li><a href="#contact">お問い合わせ</a></li>
    </ul>
</nav>

`<main>` – メインコンテンツ

<main>
    <!-- ページの主要な内容 -->
</main>

`<section>` – セクション

<section id="about">
    <h2>自己紹介</h2>
    <p>Web制作に興味があります...</p>
</section>

`<article>` – 独立した記事

<article>
    <h2>最新の作品</h2>
    <p>コーポレートサイトを制作しました...</p>
</article>

`<aside>` – 補足情報

<aside>
    <h3>関連リンク</h3>
    <ul>
        <li><a href="#">GitHub</a></li>
        <li><a href="#">Twitter</a></li>
    </ul>
</aside>

`<footer>` – フッター

<footer>
    <p>© 2024 田中太郎. All rights reserved.</p>
</footer>

セマンティックタグの使い分け

どのタグを使うべきか？

内容	推奨タグ	理由
ページのタイトル	`<header>`	ページの冒頭部分
メニュー	`<nav>`	ナビゲーション機能
独立した記事	`<article>`	単体で意味が通じる
関連する内容のグループ	`<section>`	テーマ別のまとまり
補足情報	`<aside>`	メインとは別の情報
ページの終わり	`<footer>`	ページの締めくくり

フォーム要素を作成しよう

本章では、HTMLにおけるフォーム要素について学んでいきます。フォーム要素を用いることで、Webサイトでよく見かけるお問い合わせフォームの見た目部分を構築することが可能です。

ケケンタ

フォーム要素には様々な種類があります。まずは一気に覚える必要はなく、「こんなものがあるんだ」とざっくりイメージを掴めればOKです。

基本的なフォーム構造

<form action="/submit" method="POST">
    <label for="name">お名前：</label>
    <input type="text" id="name" name="name" required>

    <label for="email">メールアドレス：</label>
    <input type="email" id="email" name="email" required>

    <label for="message">メッセージ：</label>
    <textarea id="message" name="message" rows="5" required></textarea>

    <button type="submit">送信</button>
</form>

主要なフォーム要素

テキスト入力

<!-- 通常のテキスト -->
<input type="text" id="name" name="name" placeholder="お名前を入力">

<!-- パスワード -->
<input type="password" id="password" name="password">

<!-- メールアドレス -->
<input type="email" id="email" name="email">

<!-- 数字 -->
<input type="number" id="age" name="age" min="0" max="120">

テキストエリア

<textarea id="message" name="message" rows="5" cols="50" placeholder="メッセージを入力してください"></textarea>

セレクトボックス

<label for="category">カテゴリー：</label>
<select id="category" name="category">
    <option value="">選択してください</option>
    <option value="web">Webサイト制作</option>
    <option value="design">デザイン</option>
    <option value="other">その他</option>
</select>

チェックボックス

<label>
    <input type="checkbox" name="newsletter" value="yes">
    ニュースレターを受け取る
</label>

ラジオボタン

<fieldset>
    <legend>性別</legend>
    <label>
        <input type="radio" name="gender" value="male">
        男性
    </label>
    <label>
        <input type="radio" name="gender" value="female">
        女性
    </label>
    <label>
        <input type="radio" name="gender" value="other">
        その他
    </label>
</fieldset>

フォームのバリデーション属性

バリデーションとは、フォーム入力において、「入力内容が正しいかどうか」を判定する仕組みのことです。HTML属性にバリデーション属性を設定することで、そのルールに従っていないと送信ボタンなどの確定ボタンをクリックしても処理が進まないような仕組みになっています。

<input type="text" 
       id="name" 
       name="name" 
       required 
       minlength="2" 
       maxlength="50" 
       pattern="[A-Za-z\u3040-\u309F\u30A0-\u30FF\s]+"
       title="2文字以上50文字以下で、文字のみ入力してください">

主要なバリデーション属性

required: 必須入力
minlength: 最小文字数
maxlength: 最大文字数
pattern: 正規表現パターン
title: エラーメッセージ

HTMLでバリデーション属性を設定するのは、あくまでも一般ユーザー向けに使いやすくするための表層的な対応にしかなりません。実際には、PHPなどのサーバーサイド側でのバリデーションチェックも欠かせないことは知っておくようにしましょう。

ラベルとフォームの関連付け

良い例

<label for="name">お名前：</label>
<input type="text" id="name" name="name">

悪い例

<span>お名前：</span>
<input type="text" name="name">

for属性とid属性を一致させることで、ラベルをクリックしてもフォームにフォーカスが移動します。

ポートフォリオサイトの完全なHTML構造

これまでの知識を活用して、完全なHTML構造のポートフォリオサイトを作成しましょう。

冒頭でもお伝えしたように、CSSは次回（第5回）で実装予定です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Webデザイナー田中太郎のポートフォリオサイトです。HTML、CSS、JavaScriptを使ったWeb制作の作品を紹介しています。">
    <meta name="keywords" content="Webデザイン,ポートフォリオ,HTML,CSS,JavaScript">
    <title>田中太郎 - Webデザイナー</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- ヘッダー -->
    <header>
        <nav class="navigation">
            <ul class="nav-menu">
                <li><a href="#home">ホーム</a></li>
                <li><a href="#about">自己紹介</a></li>
                <li><a href="#skills">スキル</a></li>
                <li><a href="#works">作品</a></li>
                <li><a href="#contact">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>

    <!-- メインコンテンツ -->
    <main>
        <!-- ホームセクション -->
        <section id="home">
            <h1>田中太郎</h1>
            <h2>Webデザイナー</h2>
            <p>美しいWebサイトを作ることを心がけています</p>
        </section>

        <!-- 自己紹介セクション -->
        <section id="about">
            <h2>自己紹介</h2>
            <article>
                <h3>経歴</h3>
                <p>Web制作に興味を持ち、独学でHTMLとCSSを勉強しています。</p>
                <p>現在はJavaScriptも学習中で、インタラクティブなWebサイトの制作に挑戦しています。</p>
            </article>

            <aside>
                <h3>趣味</h3>
                <ul>
                    <li>写真撮影</li>
                    <li>読書</li>
                    <li>旅行</li>
                </ul>
            </aside>
        </section>

        <!-- スキルセクション -->
        <section id="skills">
            <h2>スキル</h2>
            <ul>
                <li>HTML5</li>
                <li>CSS3</li>
                <li>JavaScript（学習中）</li>
                <li>Photoshop</li>
            </ul>
        </section>

        <!-- 作品セクション -->
        <section id="works">
            <h2>作品</h2>
            <article>
                <h3>コーポレートサイト</h3>
                <p>企業のブランディングを重視したデザイン</p>
                <img src="work1.jpg" alt="コーポレートサイトのスクリーンショット">
            </article>

            <article>
                <h3>ECサイト</h3>
                <p>ユーザビリティを重視したショッピングサイト</p>
                <img src="work2.jpg" alt="ECサイトのスクリーンショット">
            </article>
        </section>

        <!-- お問い合わせセクション -->
        <section id="contact">
            <h2>お問い合わせ</h2>
            <form action="/submit" method="POST">
                <div>
                    <label for="name">お名前：</label>
                    <input type="text" id="name" name="name" required>
                </div>

                <div>
                    <label for="email">メールアドレス：</label>
                    <input type="email" id="email" name="email" required>
                </div>

                <div>
                    <label for="category">お問い合わせ種別：</label>
                    <select id="category" name="category" required>
                        <option value="">選択してください</option>
                        <option value="project">プロジェクトの依頼</option>
                        <option value="question">技術的な質問</option>
                        <option value="other">その他</option>
                    </select>
                </div>

                <div>
                    <label for="message">メッセージ：</label>
                    <textarea id="message" name="message" rows="5" required></textarea>
                </div>

                <button type="submit">送信</button>
            </form>
        </section>
    </main>

    <!-- フッター -->
    <footer>
        <p>© 2024 田中太郎. All rights reserved.</p>
        <nav>
            <ul>
                <li><a href="https://github.com">GitHub</a></li>
                <li><a href="https://twitter.com">Twitter</a></li>
            </ul>
        </nav>
    </footer>
</body>
</html>

このHTMLの特徴