LESSON 30分

ストーリー

先
先輩
ここまでのページ、全部 <div> や <p> で書くこともできるんだけど、もっと良い方法があるんだ

もっと良い方法？

先
先輩
セマンティックHTMLっていって、タグ自体に意味を持たせるやり方だよ。HTML5で追加されたタグなんだ

セマンティックHTMLとは

セマンティック（Semantic） は「意味のある」という意味です。

非セマンティックなタグ

<div>ヘッダー</div>
<div>ナビゲーション</div>
<div>メインコンテンツ</div>
<div>フッター</div>

<div> だけでは、何の役割か分かりません。

セマンティックなタグ

<header>ヘッダー</header>
<nav>ナビゲーション</nav>
<main>メインコンテンツ</main>
<footer>フッター</footer>

タグ名を見ただけで、その部分の 役割が分かります。

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

タグ役割使う場所
<header>ページやセクションのヘッダーサイト名、ロゴ、ナビゲーション
<nav>ナビゲーションメニュー、リンク集
<main>メインコンテンツページの主要な内容
<section>テーマ別のセクション各コンテンツブロック
<article>独立したコンテンツブログ記事、ニュース
<aside>補足情報サイドバー、関連リンク
<footer>ページやセクションのフッター著作権、連絡先

ページ構造の例

<body>
  <header>
    <h1>山田太郎のポートフォリオ</h1>
    <nav>
      <a href="#profile">プロフィール</a>
      <a href="#skills">スキル</a>
      <a href="#contact">連絡先</a>
    </nav>
  </header>

  <main>
    <section id="profile">
      <h2>プロフィール</h2>
      <p>自己紹介文...</p>
    </section>

    <section id="skills">
      <h2>スキル</h2>
      <ul>
        <li>HTML</li>
        <li>CSS</li>
      </ul>
    </section>

    <section id="contact">
      <h2>連絡先</h2>
      <p>メール: taro@example.com</p>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 山田太郎</p>
  </footer>
</body>

構造図

graph TD
    A["&lt;body&gt;"] --> B["&lt;header&gt;<br>ページ上部"]
    A --> C["&lt;main&gt;<br>メインコンテンツ"]
    A --> D["&lt;footer&gt;<br>ページ下部"]
    B --> E["&lt;h1&gt;<br>サイト名"]
    B --> F["&lt;nav&gt;<br>ナビゲーション"]
    C --> G["&lt;section&gt;<br>セクション1"]
    C --> H["&lt;section&gt;<br>セクション2"]
    C --> I["&lt;section&gt;<br>セクション3"]

    style A fill:#dbeafe,stroke:#2563eb
    style B fill:#d1fae5,stroke:#059669
    style C fill:#d1fae5,stroke:#059669
    style D fill:#d1fae5,stroke:#059669
    style E fill:#f3f4f6,stroke:#9ca3af
    style F fill:#fef3c7,stroke:#d97706
    style G fill:#f3f4f6,stroke:#9ca3af
    style H fill:#f3f4f6,stroke:#9ca3af
    style I fill:#f3f4f6,stroke:#9ca3af

<div> と <section> の使い分け

タグ使う場面
<section>テーマや意味でまとまったブロック
<article>独立して成り立つコンテンツ
<div>意味はないがグループ化したいとき（CSS用）
<!-- section: 意味のあるまとまり -->
<section>
  <h2>スキル一覧</h2>
  <p>...</p>
</section>

<!-- div: CSSのためのグループ化 -->
<div class="container">
  <p>レイアウト用のラッパー</p>
</div>

先輩「迷ったら <section> を使ってみて。見出し（h2など）が付くなら <section> が適切なことが多いよ」

セマンティックHTMLのメリット

メリット説明
アクセシビリティスクリーンリーダーがページ構造を正しく読み上げる
SEO検索エンジンがページ内容を理解しやすくなる
読みやすさコードを見ただけで構造が分かる
メンテナンス性チームで開発するとき、理解しやすい

<div> との比較

Before（divのみ）

<div id="header">
  <div id="nav">...</div>
</div>
<div id="main">
  <div class="section">...</div>
  <div class="section">...</div>
</div>
<div id="footer">...</div>

After（セマンティックHTML）

<header>
  <nav>...</nav>
</header>
<main>
  <section>...</section>
  <section>...</section>
</main>
<footer>...</footer>

どちらもブラウザでの見た目は同じですが、セマンティックHTMLの方が コードの意味が明確 です。

まとめ

ポイント内容
セマンティックタグに意味を持たせる
<header>ページの上部（ロゴ、ナビ）
<nav>ナビゲーション
<main>メインコンテンツ（1ページ1つ）
<section>テーマ別のセクション
<footer>ページの下部（著作権など）
<div>意味なし。CSS用のグループ化

チェックリスト

  • セマンティックHTMLの意味を説明できる
  • <header>, <nav>, <main>, <footer> を使い分けられる
  • <section> と <div> の違いを理解した
  • セマンティックHTMLのメリットを3つ挙げられる

次のステップへ

セマンティックHTMLでページの構造がより明確になりました。次は、ユーザーからの入力を受け取る「フォーム」の基本を学びましょう。

推定読了時間: 30分