2026年4月16日
HTML セマンティックタグとは？
HTMLを学んでいると「セマンティックタグを使いましょう」という言葉を見かけることがあります。
セマンティック（semantic）とは「意味のある」という意味です。HTMLセマンティックタグとは、「この部分はナビゲーションです」「この部分は記事の本文です」というように、コードに意味を持たせるタグのことです。
たとえば、<div> タグは「ただの箱」ですが、<header> タグは「ここがヘッダーです」という意味を持ちます。
なぜセマンティックタグが重要なの？
セマンティックタグを使うと、次の3つのメリットがあります。
① SEO（検索エンジン最適化）に有利
SEO（エスイーオー）とは、GoogleなどのSearch Engine（検索エンジン）でページが上位に表示されやすくなる工夫のことです。
Googleのロボットはページの構造を読み取ってインデックス（登録）します。セマンティックタグを使うと「ここが記事のタイトル」「ここが本文」と正確に伝えられるため、検索結果に正しく表示されやすくなります。
② アクセシビリティの向上
アクセシビリティとは「誰でも使いやすい」という意味です。視覚障害のある方が使うスクリーンリーダー（読み上げソフト）は、セマンティックタグを使ってページの構造を理解します。
③ コードが読みやすくなる
チームで開発するとき、<div> だらけのコードより、<header>・<main>・<footer> を使ったコードの方が、どこに何があるかすぐわかります。
🔥 HTMLテーブルの作り方で実践してみましょう。
よく使うセマンティックタグ一覧
| タグ | 意味・使い場面 |
|---|---|
<header> | ページやセクションのヘッダー（ロゴ・ナビなど） |
<nav> | ナビゲーションリンクのまとまり |
<main> | ページのメインコンテンツ（1ページに1つ） |
<article> | 独立した記事・投稿（ブログ記事・ニュースなど） |
<section> | テーマでまとまったセクション（見出しを持つ） |
<aside> | 補足情報・サイドバー |
<footer> | ページやセクションのフッター（著作権・連絡先など） |
<h1>〜<h6> | 見出し（重要度の高い順） |
💡 パスの書き方（相対・絶対）で基礎を確認できます。
divとの違い：使い分け方
セマンティックタグが使えない場合や、意味を持たせる必要がない場合は <div> を使います。
<!-- divだけで書いた場合（意味がわかりにくい） -->
<div class="header">
<div class="nav">...</div>
</div>
<div class="main">
<div class="article">...</div>
</div>
<div class="footer">...</div>
<!-- セマンティックタグを使った場合（意味が明確） -->
<header>
<nav>...</nav>
</header>
<main>
<article>...</article>
</main>
<footer>...</footer>▶ プレビュー
🔗 あわせてHTML練習問題10選もチェックしてみましょう。
セマンティックタグを使うときのコツ
セマンティックタグを正しく使うためのコツを紹介します。
コツ1：迷ったら「この部分は何か？」と考える
「ここはページのヘッダーだからheader」「ここは記事の本文だからarticle」「ここはナビゲーションだからnav」というように、内容の役割で判断しましょう。見た目ではなく意味で選ぶのがポイントです。
コツ2：divの代わりに使えるか考える
divタグは「意味のない箱」です。レイアウトのためだけに使います。もし「この部分には意味がある」と感じたら、divの代わりにセマンティックタグが使えないか考えてみましょう。
コツ3：入れ子の順番を意識する
一般的なページの構造は次のようになります。
- headerタグ：ページの上部（ロゴやナビゲーション）
- navタグ：ナビゲーションメニュー（headerの中に入れることが多い）
- mainタグ：ページのメインコンテンツ（1ページに1つだけ）
- articleタグ：独立した記事やコンテンツ（mainの中に入れる）
- sectionタグ：記事の中のまとまり（articleの中に入れる）
- asideタグ：補足情報やサイドバー
- footerタグ：ページの下部（著作権表示や連絡先）
この順番を覚えておけば、ページの構造を迷わず作れます。
セマンティックタグを使うメリットをもう一度整理
セマンティックタグを使うと、3つの良いことがあります。
1つ目はアクセシビリティの向上です。目が見えない人が使うスクリーンリーダーは、セマンティックタグを手がかりにページの構造を読み上げます。navタグがあれば「ここはナビゲーションです」と伝えてくれます。
2つ目はSEO（検索エンジン最適化）への効果です。Googleなどの検索エンジンは、セマンティックタグを使ってページの内容を理解します。正しく使えば、検索結果で上位に表示されやすくなります。
3つ目はコードの読みやすさです。divだらけのコードは、どこが何なのかわかりにくいです。セマンティックタグを使えば、コードを見ただけでページの構造がわかります。チームで開発するときにも役立ちます。
まとめ
- ✅ セマンティックタグ：コードに「意味」を持たせるHTMLタグ
- ✅ SEO・アクセシビリティ・コードの読みやすさが向上する
- ✅
<header>・<main>・<footer>・<article>・<section>をよく使う - ✅ 意味を持たせる必要がない箱は
<div>を使う - ✅
<main>は1ページに1つだけ使う
HTMLの基礎はHTML入門で復習できます。divとspanの使い方はdivとspanの違いを参照してください。
あわせて読みたい記事
- HTMLとは？初心者向け解説 — HTML基礎に戻る
- HTMLの見出しタグの使い方 — 見出しとセクションの関係
- HTMLでアクセシビリティを高める方法 — セマンティクスとアクセシビリティ
- HTMLのdivとspanの違い — divとspanの使い方
- CSS Flexbox入門 — セマンティック要素のレイアウト
- CSSグリッドレイアウト入門 — グリッドとの組み合わせ