目次
はじめに
Webページを作るとき、<div> だけでなく <header> や <main> といった構造タグ（セマンティックタグ）を使うと、検索エンジンにも人にも分かりやすいページになります。この記事では主要な構造タグと、実際のページの組み立て方をコード付きで解説します！
構造タグとは？
「ここはヘッダー」「ここがメイン」と意味を持たせるタグです。見た目は div と同じでも、検索エンジンに構造が正しく伝わります。
主要な構造タグ一覧
| タグ | 役割 |
|---|---|
<header> | ページ上部のヘッダー |
<nav> | ナビゲーション（メニュー） |
<main> | メインコンテンツ（1ページに1つ） |
<article> | 単独で成り立つ記事 |
<section> | 意味のまとまり（章） |
<aside> | 補足・サイドバー・広告 |
<footer> | ページ下部のフッター |
実際のページ構造の例
これらを組み合わせると、ページの骨組みはこうなります👇
<body>
<header>
<nav>メニュー</nav>
</header>
<main>
<article>
<section>記事の本文</section>
</article>
<aside>サイドバー</aside>
</main>
<footer>コピーライト</footer>
</body>divではなく構造タグを使うメリット
- ✅ SEOに有利：検索エンジンがページ構造を理解しやすい
- ✅ 読みやすい：コードを見ただけで役割が分かる
- ✅ アクセシビリティ向上：読み上げソフトにも優しい
余裕が出たら article / section / aside も
header・nav・main・footerに慣れたら、次の3つも覚えると表現の幅が広がります。
<article>：それ単体で完結する内容（ブログ記事・ニュース1件など）<section>：意味のあるまとまり（見出し付きのブロック）<aside>：本筋から外れる補足（サイドバー・関連リンクなど）
最初から完璧に使い分けようとしなくて大丈夫。「とりあえずdiv」を少しずつ意味のあるタグに置き換えていくだけで、コードの質は確実に上がります。
つまずき：headerは複数OK、mainは1つだけ
意外と誤解されがちなのが「headerはページに1つだけ」という思い込みです。実は<header>は、各<section>や<article>の中にも置けます（記事ごとのタイトル部分など）。
一方で<main>は1ページに1つだけがルール。ここを取り違えると構造が崩れるので、「mainだけは唯一無二」と覚えておきましょう。
まとめ
<header><nav><main><footer>でページの骨組みを作る<main>は1ページに1つだけ- 「とりあえずdiv」をやめて構造タグを意識すると、ぐっとプロらしいコードに！
