HTMLの <div> タグを学習すると、次に多くの初心者が迷うポイントがあります。
「div は便利だけど、<header>や <main>、<section>、<article> はいつ使うの？」
「役割を持つタグを使う場合、div はどこに入れるの？」
「div は外側に置いても問題ないの？」
のような疑問です。
<div> タグは、要素をグループ化したり、レイアウトを作ったり、CSS を適用する範囲をまとめたりするための、とても重要なタグです。そのため、現在のWebサイト制作でも数多く使われています。
一方で、HTML には <header>、<main>、<section>、<article> など、ページやコンテンツの役割を表すタグも用意されています。
では、実際のWebサイトでは、これらのタグをどのように組み合わせて使っているのでしょうか。
結論から言うと、現在の HTML では「div を減らすこと」や「役割を持つタグだけで作ること」が目的ではありません。
ページ全体の構造や役割を表す部分には役割を持つタグを使い、その内部のレイアウトやデザインを作る部分では <div> を活用するという考え方が基本になります。
ここでは、実際の Webサイトでよく使われる HTML構造をサンプルコードで確認しながら、<div> と <header>、<main>、<section>、<article> の使い分け方を初心者にも分かりやすく解説します。
また、「div はどこに置けばいいの？」という初心者が迷いやすいポイントについても、外側・内側・中間という3つのパターンに分けて説明していきます。
実際のWebサイトではdivと役割を持つタグを組み合わせる
ここまでで、<div> タグと役割を持つタグは、それぞれ目的が異なることが分かりました。
では、実際のWebサイトではどのように使い分けられているのでしょうか。
プロのWeb制作では、「<div> タグをできるだけ減らす」のではなく、ページ全体の構造や役割を表す部分に役割を持つタグを使い、その内部のレイアウトやデザインを作る部分で <div> タグを活用するのが一般的です。
まずは、実際によく見かける HTML の例を見てみましょう。
<header>
<h1>マイホームページ</h1>
</header>
<main>
<section>
<h2>おすすめの商品</h2>
<div class="card-wrapper">
<div class="card">
<img src="item1.jpg" alt="商品1">
<h3>商品タイトル1</h3>
<p>商品の説明文です。</p>
</div>
<div class="card">
<img src="item2.jpg" alt="商品2">
<h3>商品タイトル2</h3>
<p>商品の説明文です。</p>
</div>
</div>
</section>
</main>一見すると、「役割を持つタグ」と「<div> タグ」が混在していて少し複雑に感じるかもしれません。
しかし、このコードには明確なルールがあります。
外側のタグでページの役割を伝える
先ほどのサンプルコードを見ると、一番外側には <header>、<main>、<section> といった役割を持つタグが配置されています。
<header>
...
</header>
<main>
<section>
...
</section>
</main>これらのタグは、ページ全体の大きな構造や役割を表すために使用します。
それぞれの役割は次のとおりです。
| タグ | 役割 |
|---|---|
| <header> | ページやコンテンツの導入部分（サイト名やナビゲーションなど） |
| <main> | ページの主となるコンテンツ |
| <section> | 1つのテーマとしてまとまった内容 |
このように、ページの大きな区切りに役割を持つタグを使うことで、「ここはページの上部」「ここから本文」「ここは1つのテーマ」といったページ構造を HTML で表現できます。
なお、役割を持つタグを使用したからといって、その中で <div> タグが使えなくなるわけではありません。
実際のWebサイトでは、このような大きな役割を持つタグの内側に、レイアウトやデザインを作るための <div> タグを数多く配置していくのが一般的です。
次は、その <div> タグがどのような場面で活躍しているのかを見ていきましょう。
内側のdivでデザインや構造を作る
続いて、<section> タグの内側にある <div> タグを見てみましょう。
<section>
<div class="card-wrapper">
<div class="card">
...
</div>
<div class="card">
...
</div>
</div>
</section>ここで使われている <div> タグは、ページの役割を表すためではなく、デザインやレイアウトを作るために配置されています。
例えば、この例では次のような目的で <div> タグが利用されています。
・card-wrapper：
商品カードを横並びにしたり、カード全体をまとめて管理したりするためのグループ
・card：
1つの商品カードを囲み、背景色や枠線、余白などのデザインを適用するためのグループ
このように、CSS で見た目を整えたり、複数の要素をひとまとまりとして管理したりする場面では、現在でも <div> タグが中心となって使われています。
ここで理解しておきたいのは、「<section> の中だから <div> を使う」のではないということです。
<div> タグを使う理由は、その場所が <section> の中にあるからではなく、デザインやレイアウトを作るためのグループ化が必要だからです。
もし、この中にデザインやレイアウトを作る予定もないのであれば、無理に <div> で囲む必要はありません。
そのため、同じようなデザインや構造が必要であれば、<header> や <main>、<article> など、ほかの役割を持つタグの中でも <div> タグは数多く使われます。
つまり、役割を持つタグと <div> タグは競合する関係ではありません。
ページ全体の構造や役割は <header> や <main>、<section> などが担当し、その内部のデザインやレイアウト、要素のグループ化は <div> タグが担当する――これが、現在のWebサイト制作で最もよく見られる HTML の構成です。
divはどこに置いてもいい？外側・内側・中間の考え方
ここまでのサンプルコードでは、<div> タグは <section> タグの内側に配置されていました。
すると、初心者の方からよく次のような疑問が出てきます。
「<div> タグは役割を持つタグの中でしか使えないの？」
「<main> や <section> の外側に置いてはいけないの？」
「役割を持つタグ同士の間に <div> タグを入れても大丈夫？」
結論から言うと、HTMLの仕様では、<div> タグの配置場所に制限はありません。
HTMLの仕様ではdivの配置場所に制限はない
<div> タグは、要素をグループ化するための汎用的なタグです。
そのため、次のようなさまざまな場所で利用できます。
・<header>タグの中
・<main>タグの中
・<section>タグの中
・<article>タグの中
・役割を持つタグの外側
つまり、「ここには <div> タグを書いてはいけない」というルールは基本的にありません。
ただし、「どこに置けるか」と「どこに置くのが適切か」は別の話です。
例えば、画面全体に背景色を付けるために役割を持つタグの外側へ
重要なのは、「なぜそこに <div> タグが必要なのか」という目的があることです。
逆に、特にデザインやレイアウト、要素をまとめる目的もないのに、何となく <div> タグを追加してしまうと、HTML の構造が分かりにくくなる原因になります。
次の項目では、<div> タグを「内側」「外側」「中間」に配置する代表的なパターンを、それぞれサンプルコードで見ていきましょう。
基本形は「役割を持つタグの内側にdivを配置する」
実際のWeb制作で最もよく見かけるのが、役割を持つタグの内側に <div> タグを配置する書き方です。
例えば、次のような HTML です。
<main>
<div class="container">
<p>本文が入ります。</p>
</div>
</main>この例では、<main> タグが「このページの主要なコンテンツ」という役割を表し、その内側の <div class=”container”> が、本文をまとめたり、横幅や余白を調整したりするためのグループとして利用されています。
このように、
・<main>：ページの役割を表す
・<div>：デザインやレイアウトを作る
というように役割を分担すると、HTMLの構造が分かりやすくなります。
もちろん、<header> や <section>、<article> などの中でも考え方は同じです。
役割を持つタグでページの構造を表し、その内部で必要なレイアウトや装飾を <div> タグが担当する――これが現在のWeb制作で最も一般的な書き方です。
デザイン目的ならdivを外側に置くこともある
一方で、役割を持つタグの外側に <div> タグを配置することも珍しくありません。
例えば、画面全体に背景色や背景画像を表示したい場合は、次のような HTML になることがあります。
<div class="background">
<main>
<p>内容が入ります。</p>
</main>
</div>この場合、<div class=”background”> は、ページ全体に背景色や背景画像を適用するためのデザイン用のグループです。
例えば、次のような場面でよく利用されます。
・画面いっぱいに背景色を表示する
・背景画像を配置する
・メインコンテンツ全体を装飾する
・レイアウト全体の幅や余白を調整する
つまり、役割を持つタグの外側に <div> タグがあるからといって、HTML として間違っているわけではありません。
大切なのは、「背景を付ける」「レイアウトを制御する」といった目的が明確にあることです。
このように、<div> タグは役割を持つタグの内側だけでなく、必要に応じて外側でも活躍する非常に柔軟なタグなのです。
中間にdivを入れる場合は目的を明確にする
役割を持つタグ同士の中間に <div> タグを配置することもあります。
例えば、複数のコンテンツを横並びにしたい場合です。
<main>
<div class="two-column">
<section>
...
</section>
<section>
...
</section>
</div>
</main>この例では、<div class=”two-column”> が2つの <section> をまとめ、CSS の Flexbox や Grid を使って2カラムレイアウトを実現する役割を持っています。
このように、デザインやレイアウトを作る目的がある場合は、役割を持つタグ同士の中間に <div> タグを配置しても全く問題ありません。
一方で、特に目的がないにもかかわらず、何となく <div> タグを挟んでしまうのは避けた方がよいでしょう。
<main>
<div>
<section>
<h2>タイトル</h2>
</section>
</div>
</main>この <div> タグにはクラス名もなく、CSS によるレイアウトや装飾、JavaScript で操作する目的もありません。
このような場合は、<div> タグを削除しても HTML の構造は変わらず、コードもすっきりします。
つまり、中間に <div> タグを配置すること自体が問題なのではありません。
「その <div> タグには、グループ化する目的があるか？」という視点で考えることが大切です。
レイアウトやデザイン、要素をまとめる役割があるなら積極的に利用し、特別な目的がないのであれば、無理に追加する必要はありません。
初心者が迷わないdivとタグ選びの判断基準
ここまで読んで、「考え方は分かったけれど、実際に HTML を書くときはどのタグを選べばいいの？」と思った方もいるでしょう。
そんなときは、次の順番で考えてみてください。
① ページ全体の役割を持つ場所か？
まずは、ページ全体の大きな構造を考えます。
例えば、次のような場所であれば、役割を持つタグを使用します。
・ページやサイトの上部（ロゴやナビゲーションなど） → <header>
・ページの主となるコンテンツ → <main>
・ページやサイトの下部（著作権表記など） → <footer>
ページ全体の骨組みになる部分では、まず役割を持つタグを検討しましょう。
② 見出しを持つテーマのまとまりか？
次に考えるのは、その部分が1つのテーマとしてまとまった内容になっているかです。
このような場合は、<section> タグを検討します。
ただし、ここで注意したいのは、
「見出し（h2）があるから必ずsectionを使う」
という意味ではありません。
<section> は、単に見出しを囲むためのタグではなく、1つのテーマや話題のまとまりを表すためのタグです。
例えば、会社紹介ページがあるとします。
<h2>会社概要</h2>
<p>会社についての説明</p>
<h2>事業内容</h2>
<p>サービス内容についての説明</p>
<h2>お問い合わせ</h2>
<p>連絡先についての説明</p>この場合、それぞれが別のテーマになっています。
そのため、次のように <section> で分けることができます。
<section>
<h2>会社概要</h2>
<p>会社についての説明</p>
</section>
<section>
<h2>事業内容</h2>
<p>サービス内容についての説明</p>
</section>
<section>
<h2>お問い合わせ</h2>
<p>連絡先についての説明</p>
</section>このように、h2 ごとに話題が変わり、それぞれが1つのテーマとして成立している場合は、<section> が適しています。
一方で、1つのテーマの中に複数の小見出しがある場合は、すべてを別々の <section> にする必要はありません。
例えば「会社概要」というテーマの中に、
・所在地
・沿革
・代表者
という情報がある場合です。
<section>
<h2>会社概要</h2>
<h3>所在地</h3>
<p>東京都...</p>
<h3>沿革</h3>
<p>創業...</p>
<h3>代表者</h3>
<p>代表者名...</p>
</section>この場合は、「会社概要」という1つのテーマの中に、小さな項目が含まれているだけなので、<h3> ごとに <section> で分ける必要はありません。
判断するときは、次のように考えると分かりやすくなります。
「この部分だけを切り取った場合、1つのテーマとして説明できるか？」
・説明できる → <section> を検討する
・単なる項目や詳細説明 → 同じ <section> 内で扱う
つまり、<section> は「見出しを囲む箱」ではなく、1つのテーマをまとめるための箱です。
③ それだけで独立したコンテンツになるか？
次に、その内容だけを切り出しても、1つの記事や読み物として成立するかを考えます。
例えば、次のようなコンテンツです。
・ブログの記事
・ニュース記事
・商品レビュー
・ユーザーの口コミ
このような独立性の高い内容であれば、<article> タグを検討します。
④ それ以外はdivでOK
ここまでのどれにも当てはまらない場合は、<div> タグを使用しましょう。
例えば、
・レイアウトを組む
・横並びにする
・背景色を付ける
・余白を調整する
・CSSを適用する範囲をまとめる
・複数の要素をグループ化する
といった目的であれば、<div> タグが最適です。
迷ったときに無理に役割を持つタグを選ぶ必要はありません。
「これはデザインやレイアウトのためのグループだな」と思ったら、自信を持って <div> タグを使ってください。
まずは、この4つの判断基準を覚えておけば、初心者のうちはタグ選びで迷うことは少なくなるはずです。
迷ったときに覚えておきたいこと
<section< や <article> などの役割を持つタグを使うとき、初心者の方が不安に感じやすいのが、
「間違った使い方をするとSEOに悪影響が出るのでは？」
「アクセシビリティの面で問題になるのでは？」
という点です。
しかし、役割を持つタグは、検索順位を上げるための特別なタグではありません。
また、少し使い方を迷ったからといって、すぐにWebサイトが評価されなくなるようなものでもありません。
大切なのは、タグを増やすことや、正解の形を暗記することではありません。
HTMLの構造を理解し、その場所に適した役割を持たせることです。
役割を持つタグは、ページ構造を分かりやすく伝えるために役立ちます。特に、スクリーンリーダーなどの支援技術を利用する方にとって、ページの構造を把握する手助けになります。
ただし、「div を減らすために役割を持つタグを使う」という考え方ではありません。
まずは、以下の基本的な考え方を理解することが大切です。
・ページ全体の役割 → <header>、<main>、<footer>
・独立したコンテンツ → <article>
・テーマごとのまとまり → <section>
・レイアウトやグループ化 → <div>
役割を持つタグは「div を減らすためのルール」ではありません。
<div>と役割を持つタグは、それぞれ目的が異なります。
重要なのは、どちらか一方を選ぶことではなく、HTML で伝えたい情報と目的に合わせて使い分けることです。
