spanを入れ子にするのは問題ない?入れられる要素は?

HTMLの記述の方法として、「spanタグの入れ子にブロック要素を入れてはいけない」などと言った記述法を耳にしたことはないでしょうか。この記事では実際にspanタグの入れ子に指定はあるのか、何を入れていいのかなどを解説していきます。

コンテンツ [表示]

  1. 1spanを入れ子にするのは問題ない?
  2. 1.1先に結論
  3. 2spanの中に入れられる要素は?

spanを入れ子にするのは問題ない?

HTMLコーディングに関して、spanタグを入れ子としてタグの中で使用したり、逆にspanタグの入れ子には何を入れるのがふさわしいのか等、入れ子に関する議題を何度か見たことがあるのではないでしょうか。

今回の記事ではspanタグに関する入れ子の問題について解説します。

Photo byPexels

先に結論

結論から言うと、spanタグはどのタグの入れ子にしても問題ありません。

HTML5からW3C(World Wide Web Consortium )はHTMLタグに、コンテンツモデルと、カテゴリーという概念を追加しました。

これらの考え方についてはこちらの公式で学ぶことをお勧めします。

コンテンツモデルに基づくと、spanタグはフレージングコンテンツといい、divタグやh1タグ、pタグなど、基本的に全てのタグの入れ子にすることができます。

(例外としては、dlタグなどには入れることができませんが)

spanの中に入れられる要素は?

次はspanタグの中にタグを入れる場合の解説をします。

HTML4以前では入れ子を考える際には、spanタグなどのインライン要素の中にブロックレベル要素を入れてはいけないというルールがありました。

しかし、現在のHTML5からはそのような問題を気にする必要はなくなりました。

厳密にはspanタグの中にはフレージングコンテンツを入れることができます。

spanタグに入れていいタグは具体的にいくつか挙げると、spanタグ、brタグ、imgタグ、aタグなどです。

今だけ
無料

【7月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

しまむ
ライター

しまむ

千葉県在住、都内の大学に通う大学1年生です。HTML/CSS/BootStrapに関する記事を執筆しています。