セマンティック HTML

セマンティック HTML とは

セマンティック HTML は、<div> や <span> の代わりに、内容の役割を表す HTML 要素 (<header>, <nav>, <main>, <article> など) を使ってマークアップする手法である。

効き方の中心は、ブラウザが組み立てるアクセシビリティツリーにある。要素にはそれぞれ既定の ARIA ロールが対応付けられており、<nav> は navigation、<main> は main、<aside> は complementary として支援技術へ渡る。一方 <div> と <span> のロールは generic で、どんな class 名を付けても支援技術には何も伝わらない。class 名は開発者と CSS にしか通じない私的な目印である。

つまり価値は「見た目が変わる」ことではなく、見た目を変えないまま、機械側が読み取れる構造の情報が増えることにある。WHATWG HTML Standard 自身も、これらの要素の主目的は自己説明的で保守しやすいマークアップを書く助けであって、著者に特定の構造を強制するものではないと述べている。

非セマンティック vs セマンティック

同じ見た目を 2 通りに書くと、機械側に残る情報の差がはっきりする。

<!-- ❌ 非セマンティック: div だらけで構造が不明 -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="content">
  <div class="article">...</div>
  <div class="sidebar">...</div>
</div>
<div class="footer">...</div>

<!-- ✅ セマンティック: 要素名から構造が分かる -->
<header>
  <nav aria-label="メインナビゲーション">...</nav>
</header>
<main>
  <article>...</article>
  <aside>...</aside>
</main>
<footer>...</footer>

上下は CSS で同じ表示にできる。違うのは、下では「ここが主要コンテンツ」「ここは補足」という区別がブラウザと支援技術に届く点である。class="article" は好きな名前に変えられる私的な文字列で、外部の道具は解釈しない。

主要なセマンティック要素

要素ごとに、表す内容と間違えやすい制約を並べる。

要素	表す内容	使うときの制約
`<header>`	導入部やナビゲーションのまとまり	見出しを含むのが通例だが必須ではない。ロゴ、検索フォーム、目次も入れられる
`<nav>`	主要なナビゲーションのまとまり	ページ上のリンク集を全部包む必要はない。フッターの数本のリンクは `<footer>` だけで足り、`<nav>` は通常不要
`<main>`	文書の主要な内容	`hidden` でない `<main>` は 1 文書に 1 つまで。階層的に正しい `<main>` の祖先は `<html>`、`<body>`、`<div>`、名前のない `<form>` に限られる (`<section>` や `<article>` の中には置けない)
`<article>`	それ自体で完結し、単独で配布や再利用ができるまとまり	入れ子にできる。記事に付くコメント 1 件ずつを内側の `<article>` にする形が仕様の例
`<section>`	見出しを伴うテーマ単位のまとまり	汎用コンテナではない。文書の概要に項目として並ぶ単位でなければ `<div>` を使う。装飾やスクリプトの都合で囲むだけの用途は `<div>` の役目
`<aside>`	本筋から外れ、切り離しても成り立つ内容	サイドバー、引用の抜き出し、広告。括弧書き程度の補足には使わない
`<footer>`	直近の祖先セクションの末尾情報	`<body>` 直下なら文書全体のフッター。`<article>` の中に置けばその記事のフッターになる
`<figure>`	図表とその説明の組	説明は `<figcaption>` に書く
`<time>`	機械可読な日時	`datetime` 属性に `2026-04-01` のような定められた形式で書く

右列は作法の話にとどまらず、支援技術に渡るロールが変わる話でもある。とくに条件付きのものが 3 つある。

<section> が region ランドマークになるのは、aria-label などで名前が付いているときだけである。名前がなければロールは generic で、<div> と区別されない。
<header> が banner、<footer> が contentinfo になるのは、<article>、<aside>、<main>、<nav>、<section> の内側にないときだけである。記事ごとのヘッダーやフッターはランドマークにならない。
<article> に対応するのは article ロールで、これはランドマークに数えられない。ランドマークは banner、complementary、contentinfo、form、main、navigation、region、search の 8 つである。

見出しの階層

見出しの階層は好みの問題ではなく、仕様が適合条件として定めている部分がある。

<!-- ✅ 論理的な階層 -->
<h1>サイトタイトル</h1>
  <h2>セクション 1</h2>
    <h3>サブセクション 1.1</h3>
  <h2>セクション 2</h2>

<!-- ❌ 階層が飛んでいる -->
<h1>タイトル</h1>
<h3>いきなり h3</h3>  <!-- h2 を飛ばしている -->

WHATWG HTML Standard の規定はこうである。見出しが 1 つ以上ある文書では、少なくとも 1 つは階層 1 (h1) であるべきで、ある見出しに続く見出しの階層は、それより浅いか、同じか、1 つだけ深いかのいずれかでなければならない。h1 の直後に h3 を置く形は、仕様が非適合の例として挙げているものである。読みやすさの推奨ではなく、適合しないマークアップという扱いになる。

<section> で囲めば中の h1 が h2 相当に扱われる、という理解も誤りである。見出しの階層は要素名で決まり、入れ子の深さから階層を組み直す仕組みは現行の仕様にはない。<section> を重ねながら見出しを全部 h1 で書けば、実際に階層 1 の見出しが並ぶだけである。

検索エンジンへの効き方

ここは誇張されやすい。要素を置き換えるだけで順位が上がると読める説明を見かけるが、そう断定できる公表情報はない。言えるのは次の 2 点である。

1 点目。見出しは文書のどこが主題でどこが下位の話題かを示すので、意味の通る階層で書けば内容の解釈がしやすくなる。これは支援技術にとっての利点と同じ理屈で、検索エンジン向けの特別な仕掛けではない。

2 点目は誤解の訂正である。<time datetime="..."> を書いても Google の構造化データにはならない。Google が構造化データとして受け取るのは JSON-LD、Microdata、RDFa のいずれかの形式で書かれたマークアップで、語彙は主に schema.org のものを使う。公式ドキュメントは、実装と保守のしやすさから多くの場合 JSON-LD を勧めている。公開日や更新日を検索結果向けに明示したいなら、<time> ではなく JSON-LD の該当プロパティを書く。<time> の役目は日時を機械可読な形式で表すことであって、それとは別の話である。

アクセシビリティへの効果

スクリーンリーダーには、ページ内のランドマークを一覧して任意の場所へ飛ぶ機能がある。この一覧はマークアップから作られるので、<div class="nav"> だけで組んだページでは一覧が空になり、利用者は上から順に読む以外の移動手段を失う。

ランドマークの一覧:
  「バナー」                             <- <header> (body 直下のとき)
  「ナビゲーション: メインナビゲーション」   <- <nav aria-label="メインナビゲーション">
  「メインコンテンツ」                     <- <main>
  「補足情報」                           <- <aside>
  「フッター情報」                        <- <footer> (body 直下のとき)

この一覧に <article> は現れない。article ロールがランドマークではないためで、本文の先頭へ飛ばしたいなら <main> を使う。同じ種類のランドマークが複数あるとき (ページ内に <nav> が 2 つあるなど) は aria-label で区別を付ける。一覧に「ナビゲーション」が 2 つ並ぶだけでは、どちらへ飛べばよいか判断できない。

もう 1 つの効き方は、アクセシビリティ対応の出発点になることである。要素が既定のロールを持っているので、role 属性を後から足す作業がそもそも要らない。逆に <div role="navigation"> と書き足す構成は要素とロールの二重管理になり、片方だけ変更されたときに静かに壊れる。

さらに掘り下げるなら関連書籍が参考になる。

サイト情報