新しいセマンティック要素とその活用法【HTML】

HTMLのセマンティック要素で本当に近年追加されたのは <search>（2023年10月）と <dialog>（2022年3月）の2つです。あわせて <details> に name 属性が加わり（2024年9月）、JavaScriptなしで排他アコーディオンが作れるようになりました。

先に注意点を書いておきます。<header> <footer> <main> <article> <section> が「新しいセマンティック要素」として紹介されることがありますが、これらはHTML5世代（2010年前後）の要素で、新しくはありません。

この記事では、本当に新しい要素と、昔からあるが正しく使い分けられていない要素を分けて解説します。特に <section> と <div> の使い分けは、多くの現場で誤用されています。

いつから使えるのかを整理する

<search>：検索領域を意味づけする要素

これまで <form role="search"> と書いていた箇所を置き換える要素です。 暗黙のARIAロールとして search を持つため、role 属性を書く必要がなくなります。

<header>
  <h1>私のブログ</h1>

  <search>
    <form action="/search/">
      <label for="q">サイト内を検索</label>
      <input type="search" id="q" name="q">
      <button type="submit">検索</button>
    </form>
  </search>
</header>

スクリーンリーダーの利用者は、ランドマーク一覧から検索領域へ直接移動できます。これが「意味のあるマークアップ」の具体的な効果です。

間違えやすい点

<search> は「検索結果を入れる要素」ではありません。 検索・絞り込みの操作部分を囲む要素です。結果はページの主コンテンツとして <main> の中に置いてください。

<!-- 検索フォームだけを囲む -->
<search>
  <form>...</form>
</search>

<main>
  <h2>検索結果</h2>
  <ul>...</ul>
</main>

ページ内の絞り込み機能（フィルタUI）にも使えます。<form> が無くても構いません。

<details name>：JavaScriptなしの排他アコーディオン

同じ name を付けた <details> は、同時にひとつしか開かなくなります。 よくあるFAQアコーディオンが、JavaScriptなしで完成します。

<details name="faq">
  <summary>送料はいくらですか？</summary>
  <p>5,000円以上のご注文で無料です。</p>
</details>

<details name="faq">
  <summary>返品はできますか？</summary>
  <p>到着から7日以内であれば承ります。</p>
</details>

<details name="faq">
  <summary>領収書は発行できますか？</summary>
  <p>マイページから発行いただけます。</p>
</details>

対応は Chrome 120 / Edge 120 / Firefox 130 / Safari 17.2 以降で、2024年9月に Baseline 入りしました。

使うときの判断

排他にすべきかどうかは慎重に決めてください。 複数の項目を見比べたいユーザーにとって、「開くと別のものが閉じる」のは邪魔になります。FAQのように1つずつ読むものには向き、仕様比較のような一覧には向きません。

また、ブラウザのページ内検索は閉じた <details> の中身も見つけて自動的に開いてくれます（Chrome系）。ただし挙動はブラウザ依存なので、検索で見つけてほしい重要な情報を畳んだままにするのは避けたほうが安全です。

<dialog>：モーダルの標準要素

2022年3月に全モダンブラウザで使えるようになった要素です。フォーカスの閉じ込め、背景の操作無効化、Escキーでのキャンセルをブラウザが担当します。

<button id="open">確認ダイアログを開く</button>

<dialog id="dlg">
  <form method="dialog">
    <p>この投稿を削除しますか？</p>
    <button value="cancel" autofocus>キャンセル</button>
    <button value="delete">削除する</button>
  </form>
</dialog>

実装の詳細はdialog要素の改善解説と使い方にまとめています。

section と div の使い分け

ここからは昔からある要素です。最も誤用が多いのが <section> なので、先に整理します。

結論：見出しを持たないなら <section> ではなく <div> を使ってください。

<!-- 見出しが無いのに section を使っている -->
<section class="card-wrapper">
  <img src="photo.jpg" alt="">
  <p>説明文</p>
</section>

<!-- レイアウト目的なら div -->
<div class="card-wrapper">
  <img src="photo.jpg" alt="">
  <p>説明文</p>
</div>

<!-- 見出しを伴う意味のまとまりなら section -->
<section>
  <h2>料金プラン</h2>
  <p>...</p>
</section>

<section> は暗黙のARIAロールを持ちません（aria-label や aria-labelledby を付けたときだけ region ロールになります）。 見出しの無い <section> を並べても、支援技術には <div> との違いが伝わりません。「意味づけしたつもり」で終わってしまいます。

article と section の違い

迷ったときの目安は「RSSに載せて意味が通るか」です。通るなら <article>、通らないなら <section> か <div> です。

main・header・footer の数の制限

<main> は1ページに1つだけです。複数置くと、支援技術がどれを主コンテンツと見なすか判断できません。表示上どうしても複数必要な場合は、hidden 属性が付いていないものが1つだけになるようにします。

一方 <header> と <footer> は複数置けます。ただしランドマークとして扱われるのは、<body> 直下にあるものだけです。

<body>
  <header><!-- banner ランドマークになる --></header>

  <main>
    <article>
      <header><!-- 記事のヘッダー。ランドマークにはならない -->
        <h2>記事タイトル</h2>
        <p><time datetime="2024-02-17">2024年2月17日</time></p>
      </header>
      <p>本文...</p>
    </article>
  </main>

  <footer><!-- contentinfo ランドマークになる --></footer>
</body>

<nav> も複数置けます。2つ以上ある場合は aria-label で区別してください。

<nav aria-label="メインメニュー">...</nav>
<nav aria-label="パンくずリスト">...</nav>

実装例：全体を組み合わせる

<body>

<header>
  <h1>私のブログ</h1>

  <nav aria-label="メインメニュー">
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="/about/">このサイトについて</a></li>
      <li><a href="/contact/">お問い合わせ</a></li>
    </ul>
  </nav>

  <search>
    <form action="/search/">
      <label for="q">サイト内を検索</label>
      <input type="search" id="q" name="q">
      <button type="submit">検索</button>
    </form>
  </search>
</header>

<main>
  <article>
    <header>
      <h2>セマンティック要素の使い分け</h2>
      <p><time datetime="2024-02-17">2024年2月17日</time></p>
    </header>

    <p>本文...</p>

    <section>
      <h3>よくある質問</h3>

      <details name="faq">
        <summary>section と div はどちらを使うべき？</summary>
        <p>見出しを持たないなら div です。</p>
      </details>

      <details name="faq">
        <summary>main は複数置ける？</summary>
        <p>表示されるものは1ページに1つだけです。</p>
      </details>
    </section>
  </article>

  <aside aria-label="関連記事">
    <h2>関連記事</h2>
    <ul>...</ul>
  </aside>
</main>

<footer>
  <p><small>&copy; 2024 私のブログ</small></p>
</footer>

</body>

SEOへの影響をどう考えるか

正直に書くと、セマンティック要素を使うだけで検索順位が上がることはありません。Google はコンテンツの内容そのものを評価します。

それでも意味のあるマークアップに価値があるのは、次の理由です。

• アクセシビリティが実際に向上する：ランドマークによるジャンプができる。これは測定可能な効果です
• 本文抽出の精度が上がる：<main> や <article> は、リーダーモードや要約の対象範囲の判定に使われます
• コードが読みやすくなる：<div class="header"> の入れ子より構造が追いやすい

「SEOのために section を使う」という発想では、見出しの無い section が量産されるだけです。支援技術にどう伝わるかを基準に選んでください。

まとめ

• <header> <footer> <main> <article> <section> はHTML5世代の要素で、新しくありません
• 近年の追加は <dialog>（2022年3月）、<search>（2023年10月）、<details name>（2024年9月）
• <search> は検索の操作部分を囲む。結果は <main> に置く
• <details name> で排他アコーディオンがJavaScriptなしで作れる。ただし比較用途には向かない
• 見出しを持たないなら <section> ではなく <div>。section は暗黙のロールを持たない
• 「切り出して単独で成立するか」で <article> かどうかを判断する
• <main> は1つだけ。<nav> が複数あるなら aria-label で区別する
• セマンティック要素だけで順位は上がりません。 効果が確実なのはアクセシビリティ

フォームの意味づけについてはHTML form要素の新機能と活用法、入力欄の属性はHTML input要素の新機能と活用法にまとめています。