そもそも「セマンティック」って何？

セマンティック（semantic）は英語で「意味のある」という意味。 つまりセマンティック HTML とは、意味を持った HTML のこと。

こんなコードを見たことない？

❌ divだらけのコード
<div class="header">
  <div class="nav">...メニュー...</div>
</div>
<div class="main">
  <div class="article">...記事...</div>
  <div class="sidebar">...サイドバー...</div>
</div>
<div class="footer">...フッター...</div>

クラス名で「なんとなく」意味を伝えているけど、 ブラウザや検索エンジンには「これ全部ただの箱です」としか見えていない。

✅ セマンティックなコード
<header>
  <nav>...メニュー...</nav>
</header>
<main>
  <article>...記事...</article>
  <aside>...サイドバー...</aside>
</main>
<footer>...フッター...</footer>

コードがスッキリして読みやすい！ しかも HTML タグ自体に「意味」が込められている から、 書き方は同じでもまったく別のコードになる。

セマンティック HTML で何が嬉しいの？

  • SEO が上がる
    Google のクローラーはタグの意味を読んでいる。<article> の中の文章は「記事のメインコンテンツ」と判断してくれる。
  • アクセシビリティが上がる
    目が見えない人が使うスクリーンリーダーは <nav> を「ナビゲーション」と読み上げる。div だらけだと読み上げ不能になる。
  • コードが読みやすくなる
    チーム開発で他の人がコードを読んだとき、パッと構造が分かる。「あ、ここが記事本文ね」って一目瞭然。
  • CSS が書きやすくなる
    article { } とか nav ul { } みたいに、タグ名でスタイルを当てられる。クラス名を考える手間が減る。

まず覚えるべき7つのタグ

HTML5 から追加されたセマンティック要素はたくさんあるけど、 まずはこの7つを覚えるだけで十分。

<header>

ページやセクションの「ヘッダー」領域。ロゴ・ナビを入れる。

<nav>

主要なナビゲーションリンクのまとまり。メニューはここに。

<main>

ページのメインコンテンツ。1ページに1つだけ使う。

<article>

単独で意味が成立するコンテンツ。記事・投稿カードなど。

<section>

テーマでまとまった章・節。見出しとセットで使う。

<aside>

補足情報。サイドバー・関連記事・注釈など。

<footer>

ページやセクションのフッター領域。著作権・リンクなど。

どっちを使えばいいの？迷ったときの判断軸

🤔 article vs section どっち？

一番よく迷うのがこの2つ。判断基準はシンプル。

✦ 判断の基準
「このコンテンツ、別のサイトに持って行っても意味が通じる？」
→ YES なら <article>（ブログ記事・商品カード・コメントなど）
→ NO なら <section>（ページの中の「機能紹介」「料金」などの章）

🤔 section vs div どっち？

見出しが付けられるなら <section>、 スタイリングだけが目的なら <div>。 div は「意味なし箱」として使い分ける。

❌ これは div でいい
<!-- 青くしたいだけ -->
<section class="blue">
  <p>内容</p>
</section>
✅ section はこう使う
<section>
  <h2>機能一覧</h2>
  <p>説明文...</p>
</section>

実際のページ構造を見てみよう

ブログサイトの場合、全体の構造はこうなる。

✅ ブログサイトの基本構造
<body>
  <header>
    <a href="/">サイトロゴ</a>
    <nav>
      <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/blog">ブログ</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h1>記事タイトル</h1>
        <time datetime="2025-03-01">2025年3月1日</time>
      </header>

      <section>
        <h2>はじめに</h2>
        <p>...本文...</p>
      </section>

      <footer>
        <p>著者：カリスマWebデザイナー</p>
      </footer>
    </article>

    <aside>
      <h2>関連記事</h2>
      <!-- 関連記事リスト -->
    </aside>
  </main>

  <footer>
    <p>&copy; 2025 WEBLOG</p>
  </footer>
</body>
💡 ポイント
<header> が2回出てきたけど、これは正しい！
ページ全体の <header> と、記事内の <header> は別物として使い分けられる。

まとめ ― 今日から使える3つのルール

  • ページの骨格は <header> <main> <footer> で作る。<div class="header"> はもう使わない。
  • 単独で意味が成立するコンテンツは <article>、ページの章・節は <section>。迷ったらこの判断軸で。
  • スタイリングだけが目的の箱は <div> を使う。「意味のある箱」と「スタイル用の箱」を使い分ける。

最初は全部覚えなくていい。まず <header> <main> <footer> の3つから始めよう。 慣れてきたら <article> <section> を加えていけばOK。