セマンティックHTMLとは｜意味・読み方・代表的なタグ・構造化データとの違い
セマンティックHTMLとは、タグを「見た目のための道具」としてではなく、「この要素が何を表しているか」という意味を持たせる形で使うHTMLのことです。
英語表記：Semantic HTML（読み方はセマンティック エイチティーエムエル）
文字を大きくしたいだけなら、<div>とCSSでも見た目は作れます。セマンティックHTMLでは、ページの主な見出しには<h1>、記事本文には<article>、補足情報には<aside>というように、中身の意味に合ったタグを使います。
この言葉の基本
セマンティックHTMLという言葉の読み方・意味・よりどころ
| 項目 | 内容 |
|---|---|
| 英語表記 | Semantic HTML |
| 読み方 | セマンティック エイチティーエムエル |
| 「セマンティック」の意味 | 「意味的な」 |
| 要素の意味を定めているもの | HTMLの仕様（HTML Living Standard） |
| 混同しやすい言葉 | 構造化データ（Schema.org） |
どの要素が何を表すかは、WHATWGが策定するHTML Living Standardで定められています。代表的な要素は次のとおりです。
代表的なセマンティックタグと、その意味・使いどころ
| タグ | 意味 | 使いどころ |
|---|---|---|
| <article> | それだけで意味が成り立つまとまり | ブログ記事・用語解説ページ全体 |
| <section> | テーマで区切った節 | 「定義」「FAQ」などの各節 |
| <h1>〜<h6> | 見出しとその階層 | ページタイトル・節の見出し |
| <nav> | ほかのページやページ内へのリンクを集めた部分 | メニュー・目次 |
| <header> | ページや節の頭の部分 | タイトル・著者・公開日 |
| <footer> | ページや節の末尾の部分 | 関連文書へのリンク・著作権表示 |
| <address> | 記事やページの連絡先情報 | 著者の連絡先 |
| <time> | 日時 | 公開日・更新日 |
| <dl><dt><dd> | 名前と説明の組を並べたリスト | 用語と説明のセット・FAQ |
セマンティックHTMLとdiv・spanの違い
<div>と<span>は、それ自体には意味を持たないタグです。同じFAQでも、書き方によってHTMLが表すものが変わります。
<div>だけで書いた例：<div class="faq"><div class="q">質問文</div><div class="a">回答文</div></div>
意味を持つタグで書いた例：<dl><dt>質問文</dt><dd>回答文</dd></dl>
1つ目の「faq」「q」「a」はclass属性の値で、スタイルを当てるための名前です。HTMLの仕様は、この値に意味を定めていません。2つ目の<dt>と<dd>は、仕様の上で「名前」と「その説明」という意味を持ちます。仕様の中にも、<dt>を質問、<dd>を回答にしてFAQを書いた例があります。
似た言葉との関係
構造化データ
構造化データは、Schema.orgの仕様に沿ってページの内容をJSON-LDなどで記述するデータです。セマンティックHTMLが本文の構造をタグで表すのに対し、構造化データはその意味を本文とは別の形で機械に伝えます。役割の違う、別の層の実装です。
見出し構造
<h1>〜<h6>の階層をどう組むかは、見出し構造と呼ばれます。セマンティックHTMLの一部で、<article>や<section>と組み合わせて使います。
BLUF
BLUFは、見出しのすぐ下に結論を置く文章の書き方の原則です。セマンティックHTMLが構造をコードで表すものなのに対し、BLUFは中身の書き方の話で、別の概念です。
GEO対策における位置づけ
GEO対策の文脈では、AIがページの構造を読み取るときの手がかりとして話題になります。RAGのRetrievalでは文書が意味の単位（チャンク）に分けて扱われ、<article>・<section>・<h2>などがその区切りの手がかりになるという見方もあります。ただ、各社が公式に明らかにしているものではありません。
GoogleはGoogle 検索の生成 AI 機能向けに最適化するためのガイドで、セマンティックHTMLは完璧である必要はない、と書いています。
セマンティックHTMLは、構造化データを入れるときにあわせて確かめる、サイトの基本設定の1つです。ほかの基本設定と、優先して入れる構造化データの順番は、GEO対策で優先する構造化データは？21種類の優先順位と設置場所で整理しています。
よくある誤解
見た目が同じなら、divで書いても同じ
見た目はCSSで自由に変えられるので、どのタグでも同じに見せられます。セマンティックHTMLが扱うのは見た目ではなく、その部分が何を表しているかです。
セマンティックHTMLにすればAIに引用される
引用が増えることは保証されません。引用にはRetrieval、順位づけ、情報の信頼性や新しさなど、いくつもの要因が関わります。
セマンティックHTMLと構造化データは同じもの
目的は似ていても、別物です。前者は本文の中のタグ、後者は本文の外に書くデータで、書く場所が違います。
セマンティックHTMLに関連する用語
セマンティックHTMLに関連する用語と、その意味
よくある質問
セマンティックHTMLは何と読みますか？
「セマンティック エイチティーエムエル」と読みます。セマンティック（Semantic）は「意味的な」という意味の英語です。
divやspanを使ってはいけないのですか？
使ってかまいません。どちらも意味を持たないタグなので、意味に合うタグがほかに無いときや、スタイルを当てるためだけにまとめるときに使います。
セマンティックHTMLとSEOはどう関係しますか？
Googleは、ウェブの多くは有効なHTMLではないが、それでも理解できるとして、Google検索のためにセマンティックHTMLが完璧である必要はないと説明しています。そのうえで、スクリーンリーダーなどを使う人がページを読み進めやすくなるため、できるだけ使うよう勧めています。