HTML5セマンティックタグとは｜header/nav/main/article/sectionの役割とSEO効果

Webページのソースを見ると、<header>や<article>のような、内容を表す名前のついたタグが並んでいることがあります。これがHTML5のセマンティックタグです。「セマンティック（semantic）」とは「意味の」という意味で、その要素がページの中でどんな役割を担っているかを、見た目ではなく意味として示します。本記事では、主要なセマンティックタグの役割と、なぜ<div>だらけのマークアップより優れているのかを順を追って解説します。

セマンティックタグとは何か

セマンティックタグとは、要素の中身が「何であるか」を名前そのもので表すHTML要素のことです。たとえば<nav>は「ナビゲーション（案内）の領域」、<footer>は「ページや記事の最後の領域」を意味します。タグ名を見ただけで、その部分が果たす役割が人間にもプログラムにも伝わります。

これに対して<div>や<span>は、それ自体には意味を持たない「ただの箱」です。レイアウトのために要素をまとめるには便利ですが、その箱が見出しなのかメニューなのか本文なのかは、タグからは判断できません。HTML5では、こうした「意味を持たない箱」を、内容にふさわしい意味のあるタグに置き換えることが推奨されています。

セマンティックなHTMLは、ブラウザ・検索エンジン・支援技術（スクリーンリーダーなど）といった人間以外の読み手に対して、ページの構造を正確に伝えます。書いたHTMLが正しく整っているかを確認したいときは、HTML整形ツールでインデントを整えると、入れ子の構造とタグの対応が一目で分かるようになります。

主要タグの役割：header/nav/main/article/section/aside/footer

HTML5で追加された代表的なセマンティックタグには、次のようなものがあります。それぞれが担当する領域を理解しておくと、ページ全体を意味のあるブロックに分けて組み立てられます。

<header>と<footer>は、ページ全体だけでなく、<article>の中の「記事の冒頭」「記事の末尾」としても使えます。つまり1ページに複数あっても構いません。一方で<main>は、そのページの中心となるコンテンツを表すため、1ページに1つだけ置くのが原則です。

<article>と<section>は混同されがちですが、判断基準は「それ単体で切り出しても意味が通るか」です。ブログ記事やニュース、コメント1件のように独立して成立する内容は<article>、章立てのように文書の一部としてのまとまりは<section>と考えると整理しやすくなります。<aside>は本筋から外れた補足情報で、なくても本文の理解に支障がない部分に使います。

divとの違い：意味のあるマークアップ

セマンティックタグの価値は、<div>と比べると明確になります。次の2つは、見た目はまったく同じにできますが、伝わる情報がまるで違います。

<div class="nav">…</div> ／ <nav>…</nav>

左の<div class="nav">は、人間が付けたクラス名「nav」を見れば意味を推測できますが、クラス名はあくまで開発者の都合で付けた目印にすぎません。ブラウザや検索エンジンにとって、それがナビゲーションだという保証はありません。一方、右の<nav>はタグ自体が「ここはナビゲーションだ」と仕様として宣言しているため、どのプログラムが読んでも同じ意味に解釈されます。

もちろん<div>が不要になったわけではありません。意味的な役割がなく、純粋にレイアウトのためにまとめたいときは、今でも<div>が適切です。大切なのは、「意味があるならセマンティックタグ、意味がなく見た目都合だけなら<div>」という使い分けです。タグの選び方に迷ったら、まずHTML整形ツールで構造を見やすく整え、どのブロックが何を表しているかを俯瞰してみるとよいでしょう。

SEOへの効果：構造を伝える

検索エンジンのクローラーは、ページのHTMLを読み取って「どこが本文で、どこがナビゲーションや補足か」を理解しようとします。セマンティックタグを使うと、この理解を明示的に助けることができます。

• 本文の特定：<main>や<article>でくくられた部分は、そのページの中心的な内容だと伝わりやすくなります。
• 補助領域の区別：<nav>や<aside>は本文ではなく案内や補足だと示せるため、評価の対象を絞り込みやすくなります。
• 見出し構造との整合：<section>と適切な見出し（h1〜h6）を組み合わせると、文書の階層が明確になります。

ただし、セマンティックタグを使えば検索順位が直接上がるという単純なものではありません。あくまでコンテンツの構造を正確に伝え、誤解を減らすための土台です。同様に、ページの内容を要約して伝える<title>やメタタグも構造理解の助けになります。これらを手早く用意したいときはメタタグ生成ツールが便利で、タイトルや説明文を入力するだけで適切な記述を作成できます。マークアップの意味づけとメタ情報の整備は、どちらもクローラーへの説明を丁寧にするという点で同じ方向を向いています。

アクセシビリティへの効果：スクリーンリーダー

セマンティックタグの効果がもっとも顕著に現れるのが、アクセシビリティです。目の不自由な利用者が使うスクリーンリーダーは、画面を「見る」のではなくHTMLの構造を読み上げてページを伝えます。このとき、タグの意味がそのまま操作の手がかりになります。

多くのスクリーンリーダーには、<nav>や<main>といった領域（ランドマーク）へ一気に移動する機能があります。セマンティックタグで領域が定義されていれば、利用者は「メインコンテンツへ飛ぶ」「ナビゲーションへ移動する」といった操作を直感的に行えます。逆に<div>だけで組まれたページでは、こうした手がかりがなく、上から順にすべてを読み進めるしかありません。

つまりセマンティックなHTMLは、マウスで見えている構造を、見えない人にも同じように届ける役割を果たします。これは一部の利用者だけの問題ではなく、キーボード操作や音声ブラウザなど、さまざまな環境での使いやすさにつながります。意味に沿ったタグを選ぶことは、そのまま「より多くの人に使えるページ」を作ることになるのです。

正しいマークアップの考え方

セマンティックなマークアップは、難しいルールを覚える作業ではなく、「この部分は何か？」を素直に考えて、それに合うタグを選ぶ習慣です。いくつかの指針を押さえておきましょう。

• 見た目で選ばない：青いから・横並びだから、ではなく「役割が何か」でタグを決めます。装飾はCSSの仕事です。
• 意味があるか自問する：意味的な役割があるならセマンティックタグ、純粋なレイアウト用なら<div>を使います。
• 見出しを正しく使う：<section>には見出しを添え、h1〜h6の順序を飛ばさないようにします。
• mainは1つ：そのページの主役となるコンテンツは<main>でひとつにまとめます。

セマンティックタグは、見た目を変えるためのものではなく、ページの構造と意味を正確に伝えるためのものです。意味のあるマークアップは、検索エンジンにもスクリーンリーダーにも、そして将来そのコードを読む人にも親切です。まずは手元のHTMLをHTML整形ツールで整え、構造を確認しながら<div>を意味のあるタグに置き換えてみてください。あわせてメタタグ生成ツールでタイトルや説明を整えれば、ページ全体の「伝わりやすさ」が一段と高まります。

なお本記事は一般的な情報の提供を目的としたものです。HTMLの仕様や各タグの推奨される使い方は更新されることがあります。実装にあたっては、最新の公式仕様やドキュメントを確認したうえで判断してください。