セマンティックHTMLとは｜header・main・article の使い分け

セマンティックHTMLとは

セマンティックHTMLとは、見た目ではなく「その部分が何であるか」という意味に合った要素を選んで文書を書くことです。<div> と <span> だけでも見た目はCSSで再現できますが、ブラウザ・スクリーンリーダー・検索エンジンには「ここがナビゲーションで、ここが本文で、ここが補足」という情報が伝わりません。

意味を持つ要素を使うと、スクリーンリーダーの利用者がランドマーク（main や nav など）へ直接ジャンプでき、キーボード操作やリーダーモードでも文書の構造が保たれます。この記事では、ページの骨格を作る要素に絞って使い分けを整理します。

基本（構文・仕組み）

MDN の分類では、article・aside・nav・section が「セクショニングコンテンツ」、h1〜h6 が「見出しコンテンツ」です。ページ全体の骨格として押さえる要素は次の表のとおりです。

要素 役割 1ページでの数の目安
header 導入部分（ロゴ、見出し、ナビなど） 複数可（直近のセクションに属する）
nav 主要なナビゲーションのリンク群 複数可（aria-label で区別する）
main そのページ固有の主要コンテンツ 1つ（表示されるものは1つだけ）
article 単独で意味が通じる内容（記事、投稿） 複数可
section 見出しを持つ関連内容のまとまり 複数可
aside 本筋から外れる補足（関連リンク、広告枠） 複数可
footer 末尾情報（著作権、関連リンク） 複数可

判断のコツは「見出しを付けられるか」です。見出しを付けられない単なるスタイル用のまとまりは div、見出しを付けられる主題のまとまりは section、単独で配信しても意味が通じるなら article を選びます。

サンプルコード（実行結果つき）

<header>
  <p>サイト名</p>
  <nav aria-label="メイン">
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="/blog/">ブログ</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h1>記事タイトル</h1>
    <section aria-labelledby="s1">
      <h2 id="s1">第1節</h2>
      <p>本文</p>
      <figure>
        <svg width="120" height="40"><rect width="120" height="40" fill="#69c"/></svg>
        <figcaption>図1 サンプル</figcaption>
      </figure>
    </section>
  </article>
  <aside>
    <h2>関連</h2>
    <p>補足</p>
  </aside>
</main>
<footer><small>&copy; 2026</small></footer>

section に aria-labelledby で見出しを結び付けておくと、名前付きのリージョンとして扱われます。画像や図表とその説明は figure と figcaption でひとまとめにします。

動作確認（検証環境と結果）

  • 環境: Windows 11、headless Microsoft Edge 154.0.4258.53（Chromium系）。C:Temptech-testrender.ps1 で描画し、JS実行後のDOMを取得。
  • 確認内容: 上記のHTMLを読み込み、document.querySelectorAll("header,nav,main,article,section,aside,footer") のタグ名を出力。
  • 結果: HEADER,NAV,MAIN,ARTICLE,SECTION,ASIDE,FOOTER の順で7要素がすべて期待どおりのDOMになりました。
  • ログ: C:Tempks2techtestssemantic-html.md、画面は C:Tempks2techtestst1semantic.png。
  • 未検証: スクリーンリーダー（NVDA、VoiceOver など）での実際の読み上げは確認していません。

セマンティックHTMLの注意点

  • 表示される main は1ページに1つです。header・footer・article・aside・nav の中には入れません。
  • 要素を選ぶ基準は見た目ではありません。ブラウザ既定のCSSによる見た目に頼らず、デザインは必ずCSSで当てます。意味のために h1 を選び、サイズのために font-size を使います。
  • section や article に見出しが無いと、リージョンとしての名前が付かず意味が弱くなります。
  • 同じ種類の nav が複数あるときは、aria-label で「メイン」「パンくず」のように区別します。

セマンティックHTMLでよくあるミス

  • すべてを div で組み、div class="header" のようにクラス名だけで意味を表している。
  • 見た目を整えるためだけに section を何重にも使う（その場合は div で足ります）。
  • ボタンのつもりで div や a にクリックイベントを付ける（操作は button、移動は a を使う）。
  • リストなのに br で改行しただけの並びにしている（ul・ol を使う）。
  • 太字にしたいだけで h3 を選び、見出し階層を崩す。

ブラウザ対応・バージョン

ここで挙げた要素は、現行の主要ブラウザで利用できます（main・nav・section などはHTML5で導入された要素です）。古いIEへの対応が不要な現在は、特別な代替手段は要りません。対応状況の詳細は MDN の互換性表で最新を確認してください。

セマンティックHTMLのチェックリスト

  • [ ] main が1つだけで、ページ固有の主要コンテンツを包んでいる。
  • [ ] ナビゲーションのリンク群を nav にしている（複数なら aria-label 付き）。
  • [ ] 見出しが h1 から順に階層化されている。
  • [ ] クリック操作の要素に button か a を使っている。
  • [ ] 画像と説明は figure と figcaption を使っている。
  • [ ] 見た目の都合だけの要素は div や span にしている。

セマンティックHTMLのFAQ（よくある質問）

Q. セマンティックHTMLにするとSEOで順位が上がりますか。
A. 順位を保証する効果は確認できていません。ただし、構造が明確だと検索エンジンが内容を理解しやすくなり、アクセシビリティや保守性は確実に向上します。

Q. section と div はどちらを使えばいいですか。
A. 見出しを付けられる主題のまとまりなら section、スタイルやレイアウトのためだけなら div です。

Q. header は1ページに1つだけですか。
A. いいえ。article の中にもそれぞれ header を置けます。サイト全体のヘッダーと記事ごとのヘッダーを分けられます。

筆者の見解（セマンティックHTML）

セマンティックHTMLは、完璧な要素選びを目指すより「迷ったら見出しを付けられるかで決める」くらいの割り切りで十分だと考えます。まず main・nav・見出し・button・a を正しく使うだけで、大半の効果が得られます。凝った分類に時間を使うより、HTMLを書いたあとに見出しだけを読み、文書の目次として通じるかを確かめる習慣を持つほうが実用的です。

セマンティックHTMLの関連項目

出典（一次情報）

タイトルとURLをコピーしました