セマンティック
初級読み方：セマンティック｜英語：Semantic
意味を持つHTMLタグのことだよ。header, main, footer, article, nav など。SEOやアクセシビリティに有利。いつ使う？ ページの構造を作るとき、divの代わりに意味のあるタグを使おう。ヘッダーには<header>、メインコンテンツには<main>、フッターには<footer>を使うよ。間違いやすいポイント: 全部<div>で作ってもページは表示されるけど、検索エンジンやスクリーンリーダーがページの構造を理解できなくなるよ。
やさしい説明
セマンティック（意味のある）タグとは、内容の「意味」や「役割」を表す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>いつ使う？
Webサイトのレイアウトを作るときに使います。ページのヘッダー部分には <header>、メニューには <nav>、本文には <main>、フッターには <footer> を使いましょう。
間違いやすいポイント
❌ 全部divで書いてしまう
見た目は同じでも、divだけで書くと検索エンジンやスクリーンリーダーがページの構造を理解できません。適切なセマンティックタグに置き換えましょう。
❌ mainタグを複数使う
<main> は1ページに1つだけです。headerやfooterは複数使えますが、mainは「ページの主要コンテンツ」を示すので1つだけにしましょう。
よくある疑問
Q: divとsectionの違いは？
A: divは意味を持たない汎用コンテナ、sectionは「意味のあるまとまり」を表します。見出し（h2等）がつくならsectionが適切です。
Q: セマンティックタグを使うメリットは？
A: ①Googleの検索順位が上がりやすい（SEO）②スクリーンリーダーが正しく読み上げる（アクセシビリティ）③コードが読みやすくなる、の3つです。
Q: 代表的なセマンティックタグは？
A: <header>（ヘッダー）、<nav>（ナビゲーション）、<main>（メインコンテンツ）、<article>（記事）、<section>（セクション）、<aside>（サイドバー）、<footer>（フッター）です。
関連用語
📖 関連レッスン
レッスンを見る →