【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ
【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ

【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ

html5のタグの入れ子のルールの保存版まとめです。「〇〇タグに〇〇タグって入れてもいいんだっけ？」という悩みを全部解決します！すべてw3cのコンテンツモデルの仕様に基づいた内容になっていますので安心して読んでくださいね...

a / article / aside / audio / b / blockquote / br / button / canvas / cite / code / div / dl / em / figure / footer / form / h1 / h2 / h3 / h4 / h5 / h6 / header / hgroup / hr / i / iframe / img / input / label / main / nav / ol / p / picture / pre / script / section / select / small / span / strong / svg / table / template / textarea / time / ul / video…などなど

spanタグ：構造・レイアウト
  • spanの中にspan
  • spanの中にbr
  • spanの中にimg
  • spanの中にa
spanに入れられるタグ

a / audio / b / br / button / canvas / cite / code / data / em / i / iframe / img / input / label /picture / select / small / span / strong / svg / textarea / time / video /…などなど

h1〜h6タグ：見出し hタグに入れられるタグ

a / audio / b / br / button / canvas / cite / code / data / em / i / iframe / img / input / label /picture / select / small / span / strong / svg / textarea / time / video /…などなど

p / preタグ：段落 pタグに入れられるタグ

a / audio / b / br / button / canvas / cite / code / data / em / i / iframe / img / input / label /picture / select / small / span / strong / svg / textarea / time / video /…などなど

strong / emタグ：強調 strong/emタグに入れられるタグ

a / audio / b / br / button / canvas / cite / code / data / em / i / iframe / img / input / label /picture / select / small / span / strong / svg / textarea / time / video /…などなど

ul / olタグ：リスト定義 ul/olタグに入れられるタグ

li / template / script

liタグ：リスト定義（子要素） liタグに入れられるタグ

a / article / aside / audio / b / blockquote / br / button / canvas / cite / code / div / dl / em / figure / footer / form / h1 / h2 / h3 / h4 / h5 / h6 / header / hgroup / hr / i / iframe / img / input / label / main / nav / ol / p / picture / pre / script / section / select / small / span / strong / svg / table / template / textarea / time / ul / video

ulの中にulを入れたい場合は？

ナビゲーションに階層つきメニューをつけたい場合があります。そんな時にulの直下にulを入れることはできないので li の中に ul を入れる必要があります。

ulの中にdivを入れたい場合は？

スライダーなどをつくるときに、 ul の中に div を入れたいということがあります。

そのときは ul の中に ul を入れる時と同様で li で div を囲うことで入れ子のタグとして入れることができます。

tableタグ：表の定義

表を定義する table ですが、直下に置いてよいのは

tableタグに入れられるタグ

tbody / thead / tfoot /caption / colgroup

だけです。この中でもtbody / thead / tfoot に関しては省略可ですので、よく使うタグであれば tr のみが table の直下に置くことのできる要素となるでしょう。

th / tdタグ：見出しセル/データセル

th と td はフローコンテンツを含めることができます。

trタグに入れられるタグ

a / article / aside / audio / b / blockquote / br / button / canvas / cite / code / div / dl / em / figure / footer / form / h1 / h2 / h3 / h4 / h5 / h6 / header / hgroup / hr / i / iframe / img / input / label / main / nav / ol / p / picture / pre / script / section / select / small / span / strong / svg / table / template / textarea / time / ul / video…などなど

tableの中にdivやtableの中にulを含みたい場合はthもしくは td の入れ子タグにしましょう。

dlタグ：定義リスト dlタグに入れられるタグ dt / ddタグ：定義リスト（子要素）

こちらも table の th / td と同様に、フローコンテンツを入れることができます。dlの中にdlを入れる時は dt または dd の中に入れるようにしましょう。

dtタグに入れられるタグ

a / audio / b / blockquote / br / button / canvas / cite / code / div / dl / em / figure / form / hgroup / hr / i / iframe / img / input / label / ol / p / picture / pre / script / select / small / span / strong / svg / table / template / textarea / time / ul / video…などなど

dt はフローコンテンツを入れることができますが、 header 、 footer 、セクショニング・コンテンツ、ヘッディング・コンテンツを入れることはできないので注意してください。

ddタグに入れられるタグ

a / article / aside / audio / b / blockquote / br / button / canvas / cite / code / div / dl / em / figure / footer / form / h1 / h2 / h3 / h4 / h5 / h6 / header / hgroup / hr / i / iframe / img / input / label / main / nav / ol / p / picture / pre / script / section / select / small / span / strong / svg / table / template / textarea / time / ul / video…などなど

aタグ：リンク

a はちょっと特殊なコンテンツモデルを持っています。transparent（トランスペアレント）といって親要素のタグのコンテンツモデルを引き継ぎます（透過的と呼ぶ）

以前までは a で div や hx といったタグを囲うことは禁止されていましたが、現在は親要素によってはaタグの中にdivやhタグを入れることが良しとされています。

aタグでhやdivを入れ子にできない場合

記事タイトル

aの親要素に注目してください。

a の親要素である p はフレージングコンテンツしか含むことができません。先ほど説明した通り a は親要素のコンテンツモデルを引き継ぐので、この場合aもフレージングコンテンツしか入れ子に含むことができないということになります。

aタグでhやdivを入れ子にできる場合 記事タイトル

aの親要素はdivはですね。

この場合 a は div のフローコンテンツを入れ子にできるというコンテンツモデルを引き継ぐので、ほとんどのタグを入れ子にすることができます。

html5の入れ子タグ早見表

div a br div dl h1〜h6 img ul ol p span table span a br em img input label span strong svg a 親要素のコンテンツモデルを継承 h1〜h6 a br em img input label span strong svg p a br em img input label span strong svg ul/ol liのみ（例外：template,script） li a br div dl h1〜h6 img ul ol p span table table tbody thead tfoot caption colgroup th/th a br div dl h1〜h6 img ul ol p span table dl dt dd div dt/dd a br div dl h1〜h6 img ul ol p span table

w3cの仕様書でコンテンツモデルを確認する方法

コンテンツモデル解説ページを開く タグをクリックし、確認する

タグの中から をクリックしてみると の細かな仕様が表示されます。

  1. Categories = spanのカテゴリー
  2. Content model = spanの中に入れられるタグのカテゴリー
タグのコンテンツを確認する 仕様書を読めるようになれば自信を持ってタグを書ける！ 役立ったら“いいね”お願いします！ 😊 いいね 132 😔 役に立たなかった 0 --> この記事を書いた人

「フリーランス3年 ▶︎ 法人2年目」のWEBの何でも屋。マーケティング・WEBデザイン〜コーディングまで守備範囲は広め。 記事へのこだわりが強いです！初学者に寄り添ったわかりやすさに定評あり。

サイト制作をホントに0から学習できる教材を無料配布中！

＼モダンなポートフォリオサイトが作れるように！／
  • 他のスクールなら確実に「有料級」のWEB制作の教材が今なら無料で閲覧可能！
  • ディレクター、デザイナー、エンジニアすべて一貫できる現役プロが1人で作成したから体系的に学習できる
  • 4つの課題にチャレンジしながら着実に基礎を固めていくから挫折がない

すべて無料公開しました 「正直そこいらの教材よりわかりやすい！」 と評価いただいた内容です。 30日でWeb制作の基本が身に着く

評価数ランキング 閲覧数ランキング 新着記事一覧

＼ pick up articles ／

圧倒的なコスパを体感 1ヶ月でWeb制作を身に着ける

評価数ランキング 閲覧数ランキング 新着記事一覧 Contact Category Contents
  • CSSセレクタのチートシート｜37パターンを一覧で解説
  • CSSショートハンドのチートシート
  • IT・web用語の読み方わかるくん
  • 個人情報保護方針