ウェブエンジニア問題集
第8章

セマンティックHTML — header・main・section・articleを使い分ける

約3分
この章の目次開く

セマンティックHTMLとは、見た目ではなく意味に合ったタグを使う書き方です。div だけでも画面は作れますが、ページの構造は伝わりにくくなります。

<header>サイトのヘッダー</header>
<main>
  <article>
    <h1>記事タイトル</h1>
    <p>記事本文です。</p>
  </article>
</main>
<footer>コピーライト</footer>
html

セマンティック要素のチートシート

タグ用途注意点
headerページやセクションの導入部分ページ最上部専用ではない
footerページやセクションの末尾情報コピーライト、関連リンクなど
mainページの主要コンテンツ1ページに基本1つ
nav主要なナビゲーションすべてのリンク集に使うわけではない
section見出しを持つ意味的な区切り見出しなしの箱にしない
article独立して読める内容記事、ニュース、カード型投稿など
aside補足・関連情報サイドバー、関連記事など
div意味を持たない汎用コンテナ意味のあるタグがない場合に使う
div は便利ですが、最初に選ぶタグではありません。意味のあるタグで表せないときに使います。

section と article

section は、ページ内の意味的なまとまりです。基本的に見出しを持たせます。

<section>
  <h2>特徴</h2>
  <p>このサービスの特徴を紹介します。</p>
</section>
html

article は、それだけを切り出しても成立する内容に使います。

<article>
  <h2>HTMLチートシートを公開しました</h2>
  <p>よく使うタグと属性を一覧で確認できます。</p>
</article>
html
学習者学習者

section と div の違いがまだ曖昧です。

先生先生

見出しを付けて「このまとまりは何か」を説明できるなら section。見た目や配置だけの箱なら div と考えると判断しやすいです。

よくあるページ構造

<body>
  <header>
    <p>サイト名</p>
    <nav aria-label="メインナビゲーション">
      <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/contact">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>
 
  <main>
    <article>
      <h1>HTMLの学び方</h1>
      <section>
        <h2>まず構造を覚える</h2>
        <p>HTMLはページの意味を表します。</p>
      </section>
    </article>
  </main>
 
  <footer>
    <small>&copy; 2026 Example</small>
  </footer>
</body>
html

参考リンク

次章では、head 内の title、meta、link とSEOの基本を学びます。

HTMLクイズに挑戦するheader、main、section、articleの使い分けをクイズで確認しよう