Web制作の学習を始めて、HTMLの構造がある程度書けるようになってくると、ふと自分のコードを見てこう思うことはありませんか？
「自分のコード、<div>タグだらけで何がどこにあるかサッパリわからない……」
「とりあえずdivで囲っておけばCSSも当たるし、見た目も作れるから問題ないよね？」
実は、この「とりあえずdiv」という習慣は、Web制作の脱・初心者を目指す上で、真っ先に克服すべき課題のひとつです。現在のWeb制作界隈では、「セマンティックHTML（意味のあるHTML）」という考え方が非常に重視されています。
この記事では、なぜdivばかり使っていけないのかという根本的な理由から、主要なセマンティックタグの具体的な使い分け、そして現場で行っている構造設計の思考プロセスまでを徹底的に解説します。
なぜ「div地獄」は卒業すべきなのか？
まず、なぜdivタグを多用することが「良くない」とされているのか、その理由を深く掘り下げてみましょう。divタグは、HTMLの仕様上「特別な意味を持たない範囲」を定義するためのタグです。つまり、コンピュータにとっては「ただの四角い箱」に過ぎません。
アクセシビリティ：誰でも優しいサイトを作るために
インターネットを利用しているのは、画面を直接見ている人だけではありません。視覚に障がいがある方は、「スクリーンリーダー」という音声読み上げソフトを使ってWebサイトを閲覧しています。
スクリーンリーダーは、HTMLのタグを頼りに「ここがメニューです」「ここが本文です」とユーザーに伝えます。もしサイト全体がdivだけで構成されていたらどうでしょう？読み上げソフトは、どこが重要な情報の塊なのかを判断できず、ユーザーは迷子になってしまいます。適切なタグを使うことは、「情報のバリアフリー化」に直結するのです。
SEO（検索エンジン最適化）：Googleに正しく評価してもらう
検索エンジン（Googleなど）のクローラーというロボットも、HTMLタグを見てサイトの内容を解析しています。
「この<article>の中にある<h2>は、この記事の重要なテーマなんだな」とロボットが理解できれば、検索結果で正しく評価されやすくなります。逆にdivばかりだと、情報の優先順位が伝わりづらく、検索順位において不利に働く可能性があるのです。
メンテナンス性：チーム開発や未来の自分のために
現場では、1つのサイトを複数人で管理したり、数ヶ月後に自分で修正したりすることが当たり前です。
数千行にわたるコードの中で、閉じタグが</div>ばかり並んでいると、どのタグがどこで終わっているのかを把握するだけで多大な時間を浪費します。<header>や<main>と書いてあれば、一目で構造が把握でき、ミスも減ります。
【完全攻略】主要なセマンティックタグの役割と使い分け
それでは、具体的にどのタグをどう使うべきか、1つずつ詳しく見ていきましょう。
その前に、表でわかりやすくまとめていきます。
| タグ | 役割 | 使う場面 |
|---|---|---|
| header | ページ上部 | ロゴ・ナビ |
| main | メイン | 本文 |
| article | 独立コンテンツ | 記事 |
| section | セクション | 章 |
| aside | 補足 | サイドバー |
| footer | 下部 | コピーライト |
<header>（ヘッダー）：ページの顔
ページの最上部によくある、ロゴやサイト名、メインメニューなどが含まれるエリアです。
- 注意点：ページ全体のヘッダーだけでなく、後述する<article>や<section>の中にある「見出しグループ」として使うことも可能です。
<nav>（ナビゲーション）：案内役
サイト内のページへのリンクや、ページ内の特定箇所へのメニュー（目次など）をまとめるためのタグです。
- 使い分けのコツ：すべてのリンクを<nav>で囲む必要はありません。あくまで「主要なナビゲーション」に絞って使います。
<main>（メイン）：主役の登場
そのページの「主要なコンテンツ」が入る場所です。
- 鉄の掟：1ページにつき1回しか使えません。また、サイドばーやヘッダーなど、全ページで共通して表示される内容は含めないのがルールです。
<article>（アーティクル）：独立した記事
それ単体でどこか別の場所に持っていっても、内容が成立する「自己完結した」セクションに使います。
- 具体例：ブログの投稿、ニュース記事、掲示板の1つの書き込みなど。
<section>（セクション）：情報のまとまり
テーマが共通している「章」や「節」を区切るために使います。
- ルール：原則として、中に必ず「見出し（h2-h6）」を入れます。見出しをつけられないような小さな塊であれば、それは<section>ではなく<div>の出番かもしれません。
<aside>（アサイド）：ちょっと余談
メインコンテンツとは直接関係のない、補足的な内容（サイドバー、広告、関連記事のリストなど）に使います。
<footer>（フッター）：締めくくり
ページの最下部にある、コピーライト表記やお問い合わせ、SNSリンクなどをまとめるエリアです。
【実践比較】コードで見る「div地獄」からの脱出
実際のコードをビフォー・アフターで比較してみましょう。
【Before】旧来のdiv依存コード
<div id="header">
<div class="logo">エンジニアブログ</div>
<div id="global-nav">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</div>
</div>
<div id="content">
<div class="main-column">
<div class="post">
<div class="entry-title">HTMLの基礎について</div>
<div class="entry-body">
<p>セマンティックタグは非常に重要です...</p>
</div>
</div>
</div>
<div class="side-bar">
<div class="widget">
<div class="widget-title">人気記事</div>
</div>
</div>
</div>
<div id="footer">
<p>© 2026 My Blog</p>
</div>【After】セマンティックHTMLへの書き換え
<header>
<div class="logo">エンジニアブログ</div>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>HTMLの基礎について</h1>
<p>セマンティックタグは非常に重要です...</p>
</article>
</main>
<aside>
<section>
<h2>人気記事</h2>
</section>
</aside>
<footer>
<p>© 2026 My Blog</p>
</footer>見ての通り、クラス名（id=”header”など）に頼らなくても、タグの名前だけで「どこが何をしているか」が一目瞭然になりました。これが美しいHTMLの形です。
プロでも迷う！<article>と<section>の境界線
セマンティックタグを使い始めると、必ずと言っていいほど「ここはどっちのタグ？」と迷う場面が出てきます。特に<article>と<section>の使い分けは、初学者の最大の悩みどころです。
判断基準は「独立性」
前述の通り、そのパーツを切り取って「別のニュースサイトやSNSに貼り付けても、意味が100%通じるか？」を自問自答してみてください。
- 通じるなら → <article>（例：ブログ記事、商品の紹介カード）
- 通じないなら → <section>（例：記事の中の「第1章」、サービスの「特徴一覧」）
どっちが「親」になっても良い
「<article>の中に<section>が入る」のが一般的ですが、実はその逆もアリです。
例えば、ニュースサイトの「スポーツセクション（<section>）」の中に、個別の「試合結果の記事（<article>）」がならんでいるという構造も、HTMLのルール上正しい書き方です。
【一歩先へ】タグの「使い分け」で迷わないコツ
ここまでは理論を解説してきましたが、自分はまだプロではないから、こんなに厳密に考えるのは難しい……と感じてしまうかもしれません。でも、大丈夫です。私自身も最初は迷いながら書いていました。
迷ったときに立ち返るための、「初心者向けマイルール」を伝授します。
「見出し」から逆算する
HTMLを書くとき、まず中身の「見出し（h2やh3）」を先に書き出してみましょう。
その見出しで区切られた情報の塊こそが<section>や<article>になるべき場所です。逆に、「見出しをつけるほどでもないな」と思う囲みは、迷わず<div>を使いましょう。
迷ったら、無理に意味をつけない
セマンティックタグは「正しい意味」を伝えるためのものです。間違った意味を伝えてしまう（例：ナビゲーションではないのに<nav>を使う）くらいなら、無意味な<div>を使う方が安全です。
ページ全体の「大枠」だけは必ず守る
細かい部分の使い分けは徐々に覚えればOKですが、以下の構成だけは、どんなに小さなサイトでも守るようにしましょう。
- 上部に
<header> - メインに
<main> - 下部に
<footer>
これだけで、あなたのHTMLの品質は上位20%に入ります。
HTMLの「アウトライン」を確認してみよう
自分の書いたHTMLがどれくらい正しく構造化されているかを確認する、「アウトライン」という考え方があります。
昔はブラウザの拡張機能などで確認していましたが、今はもっと直感的に確認できます。それは「CSSをすべて外してみること」です。
CSSを読み込まず、HTMLのタグだけの状態でブラウザに表示させてみてください。
- 重要な見出しが大きく表示されているか？
- リスト項目（<ul> <li>）が正しく並んでいるか？
- 文章の順序が、読み物として成立しているか？
この状態で「読みやすい」と感じるサイトこそが、最高のHTML構造を持っているサイトです。
まとめ：美しいHTMLが、強いエンジニアを作る
「見た目」だけならCSSさえ頑張れば作れてしまいます。しかし、プロのエンジニアがHTMLの「意味」にこだわるのは、それがサイトのアクセシビリティ、SEO、そしてメンテナンス性という「目に見えない価値」を支えているからです。
今回のポイントを復習しましょう。
- div地獄は、コンピュータにも人間にも不親切。
- <main>は1ページ1回、<section>には見出しを。
- 独立した内容は<article>、補足は<aside>。
- 迷ったら無理せず<div>でOK。
今日からコードを書くときは、まず1秒だけ立ち止まって「この箱にはどんな意味があるだろう？」と考えてみてください。その積み重ねが、あなたを「ただコードが書ける人」から「価値のあるWebサイトを作れるプロ」へと変えてくれるはずです。
コメント