セマンティック
初級読み方：セマンティック｜英語：Semantic
意味を持つHTMLタグのことだよ。header, main, footer, article, nav など。SEOやアクセシビリティに有利。
やさしい説明
セマンティック（意味のある）タグとは、内容の「意味」や「役割」を表すHTMLタグです。
教室に例えてみましょう。全部の棚に「棚」とだけ書いてあったら、どこに何があるかわかりませんよね。でも「教科書」「文房具」「掃除用具」とラベルが貼ってあれば一目瞭然です。セマンティックタグも同じで、ページの各部分に「ここはナビゲーション」「ここはメインコンテンツ」と意味を持たせます。
<div> は「ただの箱」で意味がありません。代わりに <header>、<main>、<footer>、<nav>、<article>、<section> を使うと、ブラウザや検索エンジンがページの構造を理解できるようになります。
セマンティックタグを使うと、目の不自由な方が使うスクリーンリーダー（読み上げソフト）でも正しくページを読み上げてくれます。アクセシビリティの面でもとても大切です。
図解：セマンティックタグの配置
具体例・使い方
divだけで書いた場合と、セマンティックタグで書いた場合を比べてみましょう。
<!-- ❌ divだけ（意味がわからない） -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="main">...</div>
<div class="footer">...</div>
<!-- ✅ セマンティックタグ（意味が明確） -->
<header>サイト名・ロゴ</header>
<nav>メニュー</nav>
<main>メインコンテンツ</main>
<footer>著作権・連絡先</footer>主なセマンティックタグ一覧
| タグ | 意味 | 使う場所 |
|---|---|---|
<header> | ヘッダー（導入部） | ページ上部・記事の冒頭 |
<nav> | ナビゲーション | メニュー・パンくず |
<main> | 主要コンテンツ | ページに1つだけ |
<article> | 独立した記事 | ブログ記事・カード |
<section> | テーマのまとまり | 章・セクション |
<aside> | 補足・サイドバー | 関連リンク・広告 |
<footer> | フッター（補足情報） | 著作権・連絡先 |
いつ使う？
Webサイトのレイアウトを作るときに使います。ページのヘッダー部分には <header>、メニューには <nav>、本文には <main>、フッターには <footer> を使いましょう。
見た目（CSS）は <div> でも <header> でも同じにできます。違うのは「機械にとっての意味」。検索エンジンのSEOや、スクリーンリーダーでの読み上げに差が出ます。迷ったら「この部分は何の役割か」を考えてタグを選びましょう。
間違いやすいポイント
❌ 全部divで書いてしまう
見た目は同じでも、divだけだと検索エンジンやスクリーンリーダーがページの構造を理解できません。適切なセマンティックタグに置き換えましょう。
❌ mainタグを複数使う
<main> は1ページに1つだけ。header/footerは複数OKですが、mainは「ページの主要コンテンツ」を示すので1つにしましょう。
よくある疑問
Q: divとsectionの違いは？
A: divは意味を持たない汎用コンテナ、sectionは「意味のあるまとまり」を表します。見出し（h2等）がつくならsectionが適切です。
Q: セマンティックタグを使うメリットは？
A: ①Googleの検索順位が上がりやすい（SEO）②スクリーンリーダーが正しく読み上げる（アクセシビリティ）③コードが読みやすくなる、の3つです。
Q: 代表的なセマンティックタグは？
A: <header>（ヘッダー）、<nav>（ナビゲーション）、<main>（メインコンテンツ）、<article>（記事）、<section>（セクション）、<aside>（サイドバー）、<footer>（フッター）です。
関連用語
📖 関連レッスン
レッスンを見る →