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

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

入れ子の早見表へスキップ

入れ子のルールはコンテンツモデルで決まる

html5からはブロック要素とインライン要素という概念が廃止されました。そのため以前まではインライン要素の中にブロック要素を入れてはいけないというルールがあったと思いますがそれは完全に無視してください。

とはいえcssでレイアウトを行う上では従来と変わらず

  • display : blockで親要素の幅に合わせる
  • display : inlineでその要素自体が持つ幅

という指定の仕方はできます。

ただhtmlでタグの入れ子を考える上でブロック要素とインライン要素という概念がなくなっただけです。

じゃあなにが追加されたかというと、w3cは代わりにコンテンツモデルカテゴリーという概念を新しく追加しました。

コンテンツモデル・カテゴリーと向き合おう

コンテンツモデルとカテゴリーは一見難しそうな印象だけど、この概念を理解することで「このタグ入れてもいいんだっけ?」となった時に自分で簡単に調べることができるようになるんだ。
最初は面倒に感じるかもしれないけど、まずはゆっくり以下の解説を見てみよう!

カテゴリーとは?

htmlのカテゴリー一覧

参考:HTML5の概要|とほほのWWW入門

※よく使うタグだけを抜粋

html5ではすべてのタグが

  • フローコンテンツ
  • セクショニングコンテンツ
  • ヘッディングコンテンツ
  • フレージングコンテンツ
  • エンベデッドコンテンツ
  • インタラクティブコンテンツ

この6種のカテゴリーのいずれかに属しています。

それぞれのカテゴリーが重なっているのは複数のカテゴリーに所属している要素もあるからです。

例えば「h1はヘッディングコンテンツかつフローコンテンツである」といえます。

「aはフレージングコンテンツであり、インタラクティブコンテンツでもあり、フローコンテンツでもある」といえます。

コンテンツモデルとは?

コンテンツモデルとは「その要素にはどのカテゴリーのコンテンツを入れていいか」を決めているルールです。

タグの入れ子のルールはこのコンテンツモデルによって決まっています。

例をあげてみましょう。

コンテンツモデルに反している例

<p>
  <h1>ヘッドライン</h1>
</p>

<p>
  <div>pタグにdivは入れられない</div>
</p>

例えばpが含んでいい要素はフレージングコンテンツのカテゴリーのみです。

h1divもフレージングコンテンツのカテゴリーに属していませんよね。

コンテンツモデルに沿っている例

<p>
  <img src="img.png">
</p>

<p>
  <a>リンク</a>
</p>

aimgは両方フレージングコンテンツのカテゴリーに属していますよね。なので問題ナシです。

カテゴリーとコンテンツモデルのまとめ

  • html5の要素はすべて6種のカテゴリーのいずれかに属している
  • 要素ごとにどのカテゴリーの要素を含んでいいか決まっている
  • それらのルールをコンテンツモデルと呼ぶ

要素ごとのタグの入れ子ルールまとめ

ここまででコンテンツモデルとカテゴリーについてなんとなくでも理解していればOKです。

ここからはルールに基づいたタグの入れ子ルールをよく使うタグを厳選して一覧で紹介していきます!

dviタグ:構造・レイアウト

divタグはフローコンテンツの要素を含むことができるのでほぼすべての要素を入れ子に含むことができます。

div自身がフローコンテンツでもあるのでdivの中にdivももちろん問題ありません!

divに入れられるタグ

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
  • spanの中にbr
  • spanの中にimg
  • spanの中にa

全てOKです!

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タグ:見出し

h1〜h6タグはフレージングコンテンツを子要素として入れ子に含むことができます。

ただ、フレージングコンテンツを入れることができるといっても、hの中にimgやiframeとかは単純に論理構造上おかしいのであくまで論理的に正しい形で使用しましょう。

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タグもhタグ同様、フレージングコンテンツを子要素として入れ子に含むことができます。

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タグ:強調

strognタグはpタグ同様、フレージングコンテンツを子要素として入れ子に含むことができます。

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といったタグは例外として入れることはできますが、よっぽどのことがないと使用する機会はないでしょう。

ul/olタグに入れられるタグ

li / template / script

liタグ:リスト定義(子要素)

liはdiv同様フローコンテンツを入れ子のタグとして含めることができる万能タグです。

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>
    <li>親メニュー1</li>
    <li>親メニュー2
        <ul>
            <li>子メニュー1</li>
            <li>子メニュー2</li>
        </ul>  <!-- liで囲って中にul -->
    </li>
    <li>親メニュー3</li>
<ul>

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

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

<ul>
    <li>
        <div>
            <p>スライドタイトル01</p>
            <img src="img.png">
        </div>
    </li>
    <li>
        <div>
            <p>スライドタイトル02</p>
            <img src="img.png">
        </div>
    </li>
</ul>

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

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

tableタグ:表の定義

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

tableタグに入れられるタグ

tbody / thead / tfoot /caption / colgroup

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

trタグ:行

trタグに入れられるタグ

th / td

trth / tdしか直下にかくことができません。

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

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

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の中にdivtableの中にulを含みたい場合はthもしくはtdの入れ子タグにしましょう。

dlタグ:定義リスト

dlはtableと似ていますね。データの枠組みであるdlの直下には

dlタグに入れられるタグ

dt / dd

しか入れることができません。

dt / ddタグ:定義リスト(子要素)

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

dt/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(トランスペアレント)といって親要素のタグのコンテンツモデルを引き継ぎます(透過的と呼ぶ)

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

実際にどういったケースがあるか見てみましょう。

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

<!-- 親要素がpなのでフレージングコンテンツ -->
<p>
    <a href="http://smpl.com">
        <h3>記事タイトル</h2>
    </a>
</p>

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

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

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

<!-- 親要素がdivなのでフレージングコンテンツ -->
<div>
    <a href="http://smpl.com">
        <h3>記事タイトル</h2>
    </a>
</div>

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

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

このように親要素タグのコンテンツモデルがなにかによって、aタグの中にpタグ、aタグの中にaタグ、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
dt/dd a br div dl h1〜h6 img ul ol p span table

お兄さんからひとこと

よく使うタグをピックアップして、入れられるタグの早見表を用意したよ。横の行が入れることのできるタグになっている。スキップボタンできた人もなぜこのようなルールが定められているか理解するために本文の内容をぜひ読んでみてね!

この記事を書いた人

web関連の勉強をしているみんなのために「とにかくわかりやすい記事」にこだわってwebスキルの情報を発信しています。フリーランスでデザイン・コーディング・webマーケティング(SEO)とweb全般のお仕事をしています。

この記事を読んだ人におすすめ

  • 【基本のき】ホームページの仕組みをイラスト付きでまるっと解説!

  • 【コピペOK】CSSだけで実装できるおしゃれテーブルデザイン10つ

  • HTMLのtableでテーブルを作る方法と応用テクニックを解説

  • すぐわかる!htmlでスペースや空白を入れる正しい方法

  • HTMLのリンク作成|リンクタグの使い方と【a href】の意味を優しく解説

  • 【イラスト解説】divに付いているidとclassの意味と使い方

  • 【初心者向け】0からformがわかる|HTMLでのフォーム作成

  • 【完全ガイド版】Google Chromeのダウンロード方法と使い方

記事をもっと見る +

目次を開く