HTMLのセマンティックタグとは？正しい使い方
HTMLには、見出しや段落のほかにも、「ここはメニュー」「ここが本文」のように、内容の意味を表すタグがあります。
これを「セマンティックタグ」と呼びます。
この記事では、セマンティックタグとは何か、主なタグの使い方を解説します。
1.内容の意味を伝えるタグ
セマンティックとは「意味の」という言葉です。セマンティックタグは、その部分がページの中でどんな役割なのかを伝えるタグです。
| タグ | 役割 |
|---|---|
| header | ページや区切りの、上の部分（ロゴ、メニューなど） |
| nav | 主なメニュー（ページの中の移動） |
| main | ページの本文（1ページに1つ） |
| article | それだけで完結する内容（記事など） |
| section | 見出しを持つ、内容のまとまり |
| aside | 本文と関係はあるが、補足の部分（サイドバーなど） |
| footer | ページや区切りの、下の部分（連絡先、著作権など） |
2.セマンティックタグを使うとよい理由
見た目は同じでも、div だけで作ったページと、セマンティックタグで作ったページとでは、ブラウザや検索エンジン、画面を読み上げる機能にとっての分かりやすさが違います。
たとえば、画面を読み上げる機能では、main を手がかりに本文へ飛んだり、nav を手がかりにメニューを見つけたりできます。検索エンジンにとっても、ページのどこが本文なのかが分かりやすくなります。
セマンティックタグは、見た目のためではなく、内容の意味を伝えるために使います。
3.正しい使い方
基本の組み立て
<body>
<header>
<nav>…メニュー…</nav>
</header>
<main>
<article>
<h1>記事のタイトル</h1>
<section>
<h2>見出し</h2>
<p>本文</p>
</section>
</article>
</main>
<footer>…連絡先…</footer>
</body>よくある間違い
| 間違い | 直し方 |
|---|---|
| すべて div で作っている | 役割に合うタグを使う |
| 見た目のために section を使う | 見出しを持つ内容のまとまりにだけ使う。見た目だけなら div |
| main を1ページに2つ使う | main は1ページに1つ |
| 押せる部分を div で作る | 押すものは button、移動するものは a を使う |
ボタンとリンクの使い分け
ページを移動するものは a（リンク）、その場で何かを動かすもの（メニューを開くなど）は button を使います。正しいタグを使うと、キーボードだけでも操作できるようになります。
4.よくある質問
div は使ってはいけませんか？
使ってかまいません。意味を持たない、見た目を整えるためのまとまりには div を使います。
セマンティックタグを使うと、検索の順位が上がりますか？
それだけで順位が上がるとはいえません。ただ、ページの構造が伝わりやすくなり、誰にとっても使いやすいページの土台になります。
WordPressのテーマは、セマンティックタグを使っていますか？
今の多くのテーマは使っています。ブラウザの開発者向けの機能で、HTMLを見て確かめられます。
article と section は、どう使い分けますか？
それだけを取り出しても意味が通るもの（記事など）は article、その中の見出しごとのまとまりは section と考えると分かりやすいです。
5.まとめ
セマンティックタグは、ページの各部分の役割を伝えるHTMLのタグです。
- header、nav、main、article、section、footer などを役割に合わせて使う
- main は1ページに1つ
- 見た目だけのまとまりは div を使う
- 移動は a、その場の操作は button を使う
見出しの使い方は、見出しタグ（h1〜h6）の正しい使い方で解説しています。
ホームページのHTMLの見直しで迷っている場合は、浅草Web屋にご相談ください。