実行できるHTMLドキュメント: セマンティック HTML

Q: セマンティック HTML とは何ですか？

各タグが内容の意味を表すマークアップのことです。ナビゲーションには 、それだけで完結する内容には 、ボタンには を使います。そうすればブラウザ、スクリーンリーダー、検索エンジンは、クラス名やスタイルから推測しなくてもページを理解できます。

Q: HTML のセマンティックタグにはどんなものがありますか？

レイアウト用のタグは 、 、 、 、 、 、 です。ほかによく使うセマンティックなタグに 、 、 、 、 、 、見出しの から があります。

Q: div はセマンティックな要素ですか？

いいえ。 はそれ自体に意味がなく、スタイルやレイアウトのための汎用の箱です。合うセマンティックなタグがないときに使い、あるときは 、 、 などを使いましょう。

Q: main 要素は 1 ページにいくつ置けますか？

表示される は 1 ページに 1 つです。そのページ固有の内容を囲み、 、 、 、 、 の中に置いてはいけません。

セマンティック HTML とは

セマンティック HTML とは、内容が何であるかで各タグを選ぶことです。ナビゲーションは <nav> に、メインの内容は <main> に、ブログ記事は <article> に入れます。タグ自体は普通の箱に見えますが、ページの各部分が何をするものかをブラウザ、スクリーンリーダー、検索エンジンに伝えます。下は、セマンティックなレイアウト用タグで組み立てたページ全体で、各タグに枠線とラベルを付けています。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Semantic layout</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    header, nav, main, article, aside, footer {
      border: 2px dashed #2563eb; padding: 8px; margin: 6px 0;
    }
    header::before, nav::before, main::before,
    article::before, aside::before, footer::before {
      display: block; font: 12px monospace; color: #2563eb;
    }
    header::before { content: "<header>"; }
    nav::before { content: "<nav>"; }
    main::before { content: "<main>"; }
    article::before { content: "<article>"; }
    aside::before { content: "<aside>"; }
    footer::before { content: "<footer>"; }
    .cols { display: flex; gap: 8px; }
    .cols article { flex: 2; }
    .cols aside { flex: 1; }
  </style>
</head>
<body>
  <header>
    <strong>My Blog</strong>
    <nav><a href="#">Home</a> | <a href="#">Posts</a> | <a href="#">About</a></nav>
  </header>
  <main>
    <div class="cols">
      <article>
        <h1>Learning HTML</h1>
        <p>A post about semantic tags.</p>
      </article>
      <aside>Related posts</aside>
    </div>
  </main>
  <footer>&copy; 2026 My Blog</footer>
</body>
</html>

<style> 要素を消すとページは普通のテキストのように見えますが、構造はそのまま残っています。コードを読む人にも、画面を見ずにコードを読むソフトウェアにも伝わります。

セマンティックなレイアウト用タグ

タグ	用途	スクリーンリーダーのランドマーク
`<header>`	ページや記事の導入部: ロゴ、タイトル、著者名	banner (`article`、`aside`、`main`、`nav`、`section` の中にない場合のみ)
`<nav>`	主要なナビゲーションリンクのまとまり	navigation
`<main>`	そのページ固有の内容。1 ページに 1 つ	main
`<article>`	それだけで意味が通じる完結した内容: 記事、コメント、商品カード	初期状態ではなし
`<section>`	独自の見出しを持つ、テーマでまとめた内容	region (アクセシブルな名前がある場合のみ)
`<aside>`	メインの流れの横にある関連内容: サイドバー、注釈	complementary
`<footer>`	ページや記事の締めくくりの情報: 著作権、著者、リンク	contentinfo (ページの階層の場合のみ)

各タグには詳しく解説した個別のページがあります: header、nav、section、footer。このページでは、それらの組み合わせ方を扱います。

なぜ div だけではだめなのか

<div> 要素だけで作ったページも、セマンティックなページとまったく同じ見た目にできます。違いはマークアップが伝える内容です。ボタンを押して、それぞれのバージョンで意味を持つ要素に枠線を付けてみてください。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs semantic</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .page { border: 1px solid #e5e7eb; padding: 6px; margin-bottom: 10px; }
    .page > * { padding: 4px 8px; background: #f3f4f6; margin: 4px 0; }
    .on { outline: 3px solid #16a34a; }
  </style>
</head>
<body>
  <div class="page" id="divs">
    <div class="header">Site name</div>
    <div class="nav"><a href="#">Home</a> <a href="#">Posts</a></div>
    <div class="main">Page content</div>
    <div class="footer">Footer</div>
  </div>
  <div class="page" id="semantic">
    <header>Site name</header>
    <nav><a href="#">Home</a> <a href="#">Posts</a></nav>
    <main>Page content</main>
    <footer>Footer</footer>
  </div>
  <button onclick="mark('divs')">Outline meaning in div version</button>
  <button onclick="mark('semantic')">Outline meaning in semantic version</button>
  <p id="out"></p>
  <script>
    function mark(id) {
      document.querySelectorAll('.on').forEach(el => el.classList.remove('on'));
      const found = document.querySelectorAll('#' + id + ' :is(header, nav, main, aside, article, footer)');
      found.forEach(el => el.classList.add('on'));
      document.getElementById('out').textContent = found.length + ' semantic elements found';
    }
  </script>
</body>
</html>

div のバージョンでは 0 個、セマンティックなバージョンでは 4 個見つかります。これが支援技術に見えているものです。セマンティックなページなら、スクリーンリーダーのユーザーはナビゲーションやメインの内容に直接移動できますが、div のページではすべてを順に読むしかありません。class="nav" のようなクラス名は、ブラウザにとって何の意味もありません。

最初の例の .cols のような flex の入れ物など、スタイルやレイアウトのためだけにある箱には、今でも <div> が適しています。

main、article、aside

<main> はそのページ固有の内容を囲み、1 回だけ使います。その中で、<article> は単独で別のサイトにコピーしても意味が通じる内容を、<aside> は関連はあるけれど取り除いても記事が壊れない内容を示します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>article and aside</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 2px solid #e5e7eb; padding: 0 12px; }
    aside.note {
      float: inline-end; width: 40%; margin: 0 0 8px 12px;
      background: #fef3c7; border: 1px solid #f59e0b; padding: 8px; font-size: 14px;
    }
    time { color: #6b7280; }
  </style>
</head>
<body>
  <main>
    <article>
      <header>
        <h1>Baking bread at home</h1>
        <p>By Dana, <time datetime="2026-09-24">September 24, 2026</time></p>
      </header>
      <aside class="note">
        <strong>Note:</strong> flour types vary, so adjust the water a little.
      </aside>
      <p>Mix flour, water, salt and yeast. Knead for ten minutes, then let the dough rise for an hour.</p>
      <p>Shape the loaf and bake it at 230&deg;C until the crust is dark.</p>
      <footer>Filed under: cooking</footer>
    </article>
  </main>
</body>
</html>

記事は独自の <header> と <footer> を持っています。これらはページの階層だけのものではなく、それぞれがいちばん近い記事やセクションの導入や締めくくりになります。<time datetime> 要素は、人が読める形で日付を表示しつつ、機械が読める形でも日付を伝えます。

見出しのアウトラインを確認する

見出しは構造のもう半分です。スクリーンリーダーのユーザーは見出しから見出しへとページを移動することが多いので、レベルは目次のように読め、飛ばしがないようにしましょう。このスクリプトは、実行されたページのアウトラインを出力します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    pre { background: #111827; color: #e5e7eb; padding: 10px; }
  </style>
</head>
<body>
  <h1>Coffee guide</h1>
  <h2>Beans</h2>
  <h3>Arabica</h3>
  <h3>Robusta</h3>
  <h2>Brewing</h2>
  <h4>French press</h4>
  <pre id="outline"></pre>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map(h => {
      const level = Number(h.tagName[1]);
      return '  '.repeat(level - 1) + h.tagName + ' ' + h.textContent;
    });
    document.getElementById('outline').textContent = lines.join('\n');
  </script>
</body>
</html>

「Brewing」の下の h4 はレベルを 1 つ飛ばしています。h3 に変えるとアウトラインがきれいに読めます。見出しのレベルは構造で選び、大きさを変えたいなら CSS で変えましょう。

ほかのセマンティックなタグ

セマンティクスはレイアウトだけの話ではありません。次のテキストレベルのタグも意味を持っています。

タグ	意味
`<strong>`	重要なテキスト (初期状態では太字)
`<em>`	強調 (初期状態では斜体)
`<figure>` と `<figcaption>`	キャプション付きの画像、グラフ、コード例
`<time datetime="...">`	機械が読める形の日付や時刻
`<address>`	ページや記事の著者の連絡先
`<mark>`	検索で一致した部分のような、ハイライトしたテキスト
`<abbr title="...">`	正式名称付きの略語
`<button>`	操作を実行するもの

<!DOCTYPE html>
<figure style="margin: 0; border: 1px solid #e5e7eb; padding: 8px; display: inline-block;">
  <img alt="Blue square" width="120" height="80"
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Crect width='120' height='80' fill='%232563eb'/%3E%3C/svg%3E">
  <figcaption>Figure 1: a caption tied to its image.</figcaption>
</figure>
<p>Search results for <mark>semantic</mark>. The <abbr title="World Wide Web Consortium">W3C</abbr> writes web standards.</p>

略語「W3C」にマウスを乗せると、ツールチップに正式名称が表示されます。

よくある間違い

見た目のためにタグを使う。 <blockquote> は引用のためのもので、インデントのためではありません。<h3> は見出しのレベルで、中くらいの太字のテキストのためではありません。見た目は CSS で整えましょう。
何でも <section> で囲む。 セクションには見出しとテーマが必要です。スタイルのための箱なら <div> を使いましょう。
表示される <main> が複数ある。 1 ページに 1 つにし、<article>、<aside>、<header>、<nav>、<footer> の中には置かないようにしましょう。
リンクのリストをすべて <nav> に入れる。 サイトのメニューや目次のような主要なナビゲーションのまとまりに使いましょう。フッターにある数個のリンクには不要です。
クリックできる <div> 要素。 <div onclick> にはキーボードでたどり着けません。操作には <button>、移動には <a href> を使いましょう。

よくある質問

セマンティック HTML とは何ですか？

各タグが内容の意味を表すマークアップのことです。ナビゲーションには <nav>、それだけで完結する内容には <article>、ボタンには <button> を使います。そうすればブラウザ、スクリーンリーダー、検索エンジンは、クラス名やスタイルから推測しなくてもページを理解できます。

HTML のセマンティックタグにはどんなものがありますか？

レイアウト用のタグは <header>、<nav>、<main>、<article>、<section>、<aside>、<footer> です。ほかによく使うセマンティックなタグに <figure>、<figcaption>、<time>、<address>、<strong>、<em>、見出しの <h1> から <h6> があります。