HTMLでは、タグを別のタグの中に配置する「入れ子（ネスト）」を使ってWebページの構造を作成します。しかし、すべてのタグを自由に入れ子にできるわけではありません。
特に、「spanの中にdivは入れられる？」「spanの中にspanは問題ない？」「divの中にdivを入れても大丈夫？」といった疑問を持つ方は多いでしょう。
結論からいうと、divの中にdivやspanを入れること、spanの中にspanを入れることは可能ですが、spanの中にdivを入れるのは基本的に適切ではありません。
この記事では、HTMLの入れ子（ネスト）の基本をはじめ、divタグとspanタグの正しい入れ子ルール、それぞれの使い方や注意点をサンプルコード付きでわかりやすく解説します。また、入れ子を深くしすぎるデメリットや、保守性の高いHTMLを書くためのポイントも紹介します。
HTMLの入れ子とは？
HTML の入れ子（ネスト）とは、ある HTMLタグ の中に別の HTMLタグ を配置する書き方のことです。
HTML では、複数の要素を組み合わせてページの構造を作ります。
例えば、divタグ の中に文章を入れる pタグ を配置したり、文章の一部分を指定する spanタグ を入れたりすることがあります。
<div>
<p>これは<span>入れ子</span>の例です。</p>
</div>上記の場合、divの中にpがあり、さらにpの中にspanがあるため、複数の階層でタグが入れ子になっています。
ただし、HTMLタグはすべて自由に入れ子にできるわけではありません。
タグごとに役割や配置ルールがあり、正しい構造で記述する必要があります。
divタグとspanタグの違い
divタグ と spanタグ は、どちらも HTML の要素をまとめるために使われるタグですが、対象とする範囲が異なります。
divタグ は、複数の要素をまとめるために使用されるタグです。ページ内の大きなまとまりやレイアウトの区切りを作る場合によく利用されます。
一方、spanタグ は文章や要素の一部分だけを対象にするためのタグです。文字の色やサイズを変更するなど、特定の範囲だけに CSS を適用したい場合などに使用されます。
また、従来の HTML では、divタグ はブロックレベル要素、spanタグ はインライン要素として分類されていました。
- divタグ（ブロック要素として扱われる）
- ひとまとまりの範囲を作る
- 前後で改行される
- ページ構造やレイアウトの区切りに使われる
- spanタグ（インライン要素として扱われる）
- 文章内の一部分を指定する
- 文章の流れの中で使用される
- 一部分だけにCSSを適用する場合などに使われる
なお、HTML5以降では「ブロックレベル要素」「インライン要素」という分類は正式な仕様上の分類ではなく、コンテンツモデルによって要素の役割や配置ルールが定義されています。
ただし、div と span の入れ子ルールを理解するうえでは、現在でも「div は大きなまとまりを作る要素」「span は文章などの一部分を扱う要素」と考えると理解しやすくなります。
この役割の違いを理解しておくことで、「span の中に div を入れられるのか」「div の中に span を入れてよいのか」といった入れ子のルールを判断しやすくなります。
spanの中にdivは使える？
結論からいうと、spanタグ の中に divタグ を入れることは基本的にNGです。
ただし、ブラウザではエラーにならず表示される場合があります。
そのため「記述できない」という意味ではなく、HTML の構造として適切ではないという意味でNGと考えます。
HTML の仕様上、span は文章内の一部分などを扱うための要素であり、div はページ内のまとまりを作るための要素です。
そのため、インライン要素として扱われる span の中に、ブロック要素として扱われる div を配置する構造は適切ではありません。
例えば、以下のような HTML は正しい構造とはいえません。
<span>
<div>コンテンツ</div>
</span>一見するとブラウザ上では表示できる場合がありますが、HTML の構造としては不適切です。
なぜspanの中にdivはNGなのか
span と div では、想定されている役割が異なります。
span は、文章や要素の一部分を指定するために使用します。
例えば、文章の一部だけ色を変更したり、特定の文字だけに CSS を適用したりする場合に利用されます。
一方、div は複数の要素をまとめたり、ページ内の大きな構造を作ったりするために使用します。
画像、見出し、文章など複数の要素をグループ化する場合によく使われます。
つまり、
・span：文章などの一部分を扱う
・div：要素のまとまりを扱う
という役割の違いがあります。
そのため、文章の一部分を扱う span の内部に、ページ構造を作るための div を配置すると、HTML の構造として不自然になります。
正しく記述する場合は、以下のように div の中に span を配置します。
<div>
これは<span>重要な文章</span>です。
</div>このように、外側に大きなまとまりを作る div を配置し、その内部の一部分を指定するために span を使う形が一般的です。
spanの中にdivを入れた場合のブラウザの挙動
では、実際に span の中へ div を書いた場合、ブラウザではどのように表示されるのでしょうか。
多くのブラウザでは、エラー表示になるわけではなく、ある程度表示されます。
そのため、「使える」と勘違いしてしまうことがあります。
しかし、ブラウザは HTML を解析する際に、記述されたコードをそのまま保持するとは限りません。
不正または不適切な構造の場合、自動的に HTML を補正して解釈することがあります。
このように、画面上は問題なく表示されていても、HTML として正しい構造になっているとは限りません。
また、将来的な修正やCSSの適用、JavaScript による操作を行う際に意図しない動作につながる可能性があります。
そのため、span の中に div を入れるのではなく、div の中に span を入れる構造を基本にしてください。
spanの中にspanを入れる
結論からいうと、spanタグ の中に spanタグ を入れることは問題ありません。
span は文章や要素の一部分を指定するために使用するインライン要素として扱われます。
そのため、複数の範囲を指定したい場合や、それぞれ異なる CSS を適用したい場合には、span を入れ子にして使用できます。
例えば、以下のような書き方です。
<span class="text">
これは<span class="highlight">重要な文章</span>です。
</span>この例では、外側の span で文章全体を対象にし、内側の span で「重要な文章」という一部分だけを指定しています。
CSS を設定すると、それぞれ異なる装飾を適用できます。
.text {
background-color: #FFFACD;
color: #333;
}
.highlight {
color: red;
font-weight: bold;
}このように、外側の span で基本のスタイルを指定し、内側の span で一部分だけ別のスタイルを適用するといった使い方が可能です。
ブラウザでの表示
ただし、span を何重にも入れ子にすると、HTML の構造が複雑になり、後から修正しにくくなる場合があります。
そのため、span の入れ子は必要な範囲で使用し、単なる装飾目的で不要な span を増やしすぎないことが大切です。
divの中にdivを入れる
divタグ の中に divタグ を入れることは問題ありません。
div は、複数の要素をまとめてグループ化するために使用するタグです。
そのため、ページ内の構造を作る際には、親の div の中に子の div を配置する入れ子構造がよく使われます。
例えば、Webページのレイアウトを作成する場合、以下のように div を階層的に配置することがあります。
<div class="container">
<div class="content">
<h2>タイトル</h2>
<p>本文が入ります。</p>
</div>
</div>この例では、外側の div でページ内の大きな範囲をまとめ、内側の div でさらに細かいコンテンツのまとまりを作っています。
実際のWebサイトでは、以下のような用途で div の入れ子が利用されます。
・ページ全体のレイアウトを分ける
・ヘッダーやメインコンテンツなどの領域をまとめる
・カード型のコンテンツをグループ化する
・CSSでレイアウトやデザインを調整する
ただし、div は便利なため、必要以上に増やすと HTML の構造が複雑になります。
意味のあるまとまりごとに使用し、適切な深さで入れ子にすることが大切です。
divの中にspanを入れる
divタグ の中に spanタグ を入れることは問題ありません。
div は要素のまとまりを作るためのタグであり、その中には文章や画像、他の要素などさまざまなコンテンツを配置できます。
そのため、div の中で文章の一部分だけを指定したい場合に、span を使用することができます。
例えば、以下のような使い方です。
<div>
これは<span class="important">重要な文章</span>です。
</div>この例では、divで文章全体を含むまとまりを作り、span で「重要な文章」の部分だけを指定しています。
CSS を適用すると、特定の文字だけ色を変更したり、太字にしたりできます。
.important {
color: red;
font-weight: bold;
}このように、div の中に span を配置する構造は、HTML では一般的に使用されます。
ブラウザでの表示
div で大きな範囲やコンテンツのまとまりを作り、その内部の一部分を span で指定するという使い分けを意識すると、HTML の構造を整理しやすくなります。
入れ子を深くしすぎる問題
HTML では、タグを入れ子にすることで要素を整理できます。
しかし、必要以上に入れ子を深くすると、HTML の構造が複雑になり、管理しにくくなる場合があります。
特に、レイアウト調整のためだけに div を何重にも重ねると、どの要素が何の役割を持っているのか分かりにくくなります。
このような状態は「divスープ（div soup）」や「div地獄」と呼ばれることがあります。
ただし、入れ子が深いこと自体が必ず問題というわけではありません。
重要なのは、それぞれのタグに役割を持たせ、必要以上に複雑な構造にしないことです。
divスープ について詳しくは、divスープ（div地獄）とは？で解説しています。
正しいHTML構造を意識しよう
HTMLの入れ子では、単にブラウザで表示できるかだけではなく、正しい構造になっているかを意識することが重要です。
今回解説したように、div の中に div や span を入れること、span の中に span を入れることは問題ありません。
一方で、span の中に div を入れるような構造は、表示できる場合があっても適切な HTML とはいえません。
HTMLタグ には、それぞれ想定された役割があります。
・div：要素のまとまりを作るために使用する
・span：文章や要素の一部分を指定するために使用する
この役割を理解して入れ子を作ることで、読みやすく管理しやすい HTML になります。
また、必要に応じて div ではなく、header、main、section、article などの意味を持つ HTMLタグ（セマンティック要素）を使用することも大切です。
正しい HTML構造 を意識すると、CSS や JavaScript による編集もしやすくなり、長期的に管理しやすい Webページ を作成できます。
正しいHTML構造の考え方については、適切なHTML要素を使うで解説しています。
