【脱初心者】HTMLの入れ子ルールを理解する【調べ方が身につく】

いきなりですが、以下の質問に答えられますか？

Q1.ul要素の子要素として、p要素を入れれますか。

例えば以下のコードは正しいでしょうか

      
<ul>
    <p>テキスト</p>
    <li>テキスト</li>
</ul>

Q2.dd要素の子要素として、dl要素を入れれますか。

例えば以下のコードは正しいでしょうか

      
<dl>
    <dt>テキスト</dt>
    <dd>
        <dl>
            <dt>テキスト</dt>
            <dd>テキスト</dd>
        </dl>
    </dd>
</dl>

正解は

Q1.ul要素の子要素として、p要素を入れれますか？: NO
Q2.dd要素の子要素として、dl要素を入れれますか？: YES

それぞれの要素には、子要素として入れて良い要素と入れてはいけない要素があります。

この記事で詳しくみていきます。

記事で取り上げる内容

入れてもいい子要素を決めるルール「コンテンツモデル」の解説
要素を分類する「カテゴリー」の主要7分類の解説
コンテンツモデルの調べ方

記事を読むメリット

コンテンツモデルとカテゴリーについて理解できる
「どの要素を子要素として入れていいか」の調べ方がしっかりと身に付く
HTMLの標準仕様書「HTML Living Standard」の見方がわかり、HTML中級者へステップアップできる

それではさっそくみていきましょう。

コンテンツモデル
カテゴリー
コンテンツモデル（ある要素に入れても良い子要素の集まり）の調べ方
実践！いろいろな要素のコンテンツモデルを調べる
まとめ

コンテンツモデル

「コンテンツモデル」とは、ある要素の子要素として入れれる要素の集まりのことです。

要素ごとにそれぞれのコンテンツモデルを持っています。

例えば、ul要素のコンテンツモデルは、li要素です。（厳密に言えばあと数個特殊な要素を子要素として入れれますが、ここでは言及しません）

なので、ul要素の子要素として、li要素を入れれます。
逆に、ul要素の子要素として、li要素以外のp要素やa要素などは入れれません。

あとで要素ごとのコンテンツモデルの調べ方を紹介します。

ですが、その前にコンテンツモデルと関わる「カテゴリー」について説明します。

コンテンツモデル（ある要素に入れても良い子要素の集まり）の調べ方

ではコンテンツモデルの調べ方を解説します。ですがその前に一旦おさらいです。

コンテンツモデルとは、「ある要素の子要素として、入れていい要素の集まり」です。
カテゴリーとは、「要素を特徴により分類したもの」です。

この二つだけ覚えておいてください。

コンテンツモデルを調べるために、以下のサイトを使用します。
英語:HTML Living Standard
日本語:HTML Living Standard

英語に抵抗がない方は、最新の情報が掲載されている英語版をご参照ください。

以降、この記事では英語版で解説していきます。
（日本語版でも手順は同じなので、適宜読み替えてください）

それでは調べていきます。

div要素のコンテンツモデルを調べる

以下がコンテンツモデルの調べ方です。手順に沿って進めてください

以下のリンク先を開く
英語:HTML Living Standard
このページの「4.4.16 The div element」リンクをクリックします。（見つけにくい場合は「The div element」で検索するとヒットします）
div要素の解説が表示されます。

div要素のコンテンツモデルは「Content model」に書かれています。内容は以下です。

If the element is a child of a dl element: one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements. If the element is not a child of a dl element: flow content.

和訳すると、div要素のコンテンツモデルは以下になります

・div要素がdlの子要素の時は、dt要素でなおかつ一個以上のdd要素が続くもの

・div要素がdlの子要素ではない時は、フローコンテンツに属する要素
フローコンテンツに属する要素を確認するため、「flow content」をクリックします。
フローコンテンツに属する要素の一覧が表示されます

これで必要な情報が揃いました↓

div要素のコンテンツモデル: ・div要素がdl要素の子要素の時は、dt要素でなおかつ一個以上のdd要素が続くもの; ・div要素がdl要素の子要素ではない時は、フローコンテンツ
フローコンテンツの要素一覧

コンテンツモデルに則したコーディング、則していないコーディングの具体例

調べた情報をもとに、div要素を用いた具体的なコーディングのNG例、OK例を挙げると以下になります。

OK（理由：a要素はフローコンテンツに属するので、div要素の子要素として入れれる）

          
<div>
    <a href="#">リンク</a>
</div>

OK（理由：div要素自身もフローコンテンツに属するので、div要素の子要素として入れれる）

          
<div>
    <div>テキスト</div>
</div>

NG（理由：title要素はフローコンテンツに属さないので、div要素の子要素として入れれない）

          
<div>
    <title>テキスト</title>
</div>

OK（理由：div要素がdl要素の子要素の時、dt要素でなおかつdd要素が続くものを子要素として入れれる）

          
<dl>
    <div>
        <dt>タイトル</dt>
        <dd>説明</dd>
    </div>
</dl>

NG（理由：div要素がdl要素の子要素の時、dt要素とdd要素以外は子要素として入れれない）

          
<dl>
    <div>
        <p>説明</p>
    </div>
</dl>

おさらい

ざっと調べ方をおさらいします。

以下のページを開く
英語:HTML Living Standard
調べたい要素の「◯.◯.◯ The [要素名] element」をクリックする。見つけにくい場合は「The [要素名] element」で検索する
要素の解説が表示される。
「Content model」で、要素のコンテンツモデルを確認する。
もしカテゴリーにどの要素が属するかわからない時は、カテゴリーリンクをクリックして、要素一覧を確認する

以上でコンテンツモデルの調べ方を学びました。

最初は面倒に感じるかも知れませんが、慣れるまでの辛抱です。

最後に実践用として、いくつかの設問を用意しました。
コンテンツモデルの調べ方を定着させるために、ぜひ挑戦してみてください。

補足

ついでに要素の解説の他の項目について触れておきます。
div-element

Categories: 要素が属するカテゴリー
Contexts in which this element can be used: 要素が使用可能なコンテキスト

div要素の「Contexts in which this element can be used」の内容は以下です。

Where flow content is expected. As a child of a dl element.

和訳すると、div要素が使用可能なコンテキストは以下です。: ・フローコンテンツが期待されるところ; ・dlの子要素

実践！いろいろな要素のコンテンツモデルを調べる

それぞれの要素のコンテンツモデルを調べて、設問に解答してください。

Q1-1.h1要素の子要素として、p要素を入れれる？

Q1-2.h1要素の子要素として、a要素を入れれる？

Q2-1.p要素の子要素として、img要素を入れれる？

Q2-2.p要素の子要素として、p要素を入れれる？

Q3.table要素の子要素として、div要素を入れれる？

解答はページ下に記載しています。

コンテンツモデルの調べ方↓

以下のページを開く
英語:HTML Living Standard
調べたい要素の「◯.◯.◯ The [要素名] element」をクリックする。見つけにくい場合は「The [要素名] element」で検索する
要素の解説が表示される。
「Content model」で、要素のコンテンツモデルを確認する。
もしカテゴリーにどの要素が属するかわからない時は、カテゴリーリンクをクリックして、要素一覧を確認する

解答↓

Q1-1の回答

h1要素の子要素として、p要素を入れれない

Q1-2の解答

h1要素の子要素として、a要素を入れれる。

＜解説＞

h1の子要素として入れれるのは、フレージングコンテンツに属する要素のみ。
p要素はフレージングコンテンツに属さない。なのでh1の子要素としてp要素は入れれない。
a要素はフレージングコンテンツに属する。なのでh1の子要素としてa要素は入れれない。

h1要素を用いたコーディングでのOK例とNG例は以下

NG（理由：h1要素の子要素として、p要素を入れれない）

            
<h1>
    <p>テキスト</p>
</h1>

OK（理由：h1要素の子要素として、a要素を入れれる）

    
<h1>
    <a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/table">テキスト</a>
</h1>

Q2-1の解答

p要素の子要素として、img要素を入れれる

Q2-2の解答

p要素の子要素として、p要素を入れれない

＜解説＞

p要素の子要素として入れれるのは、フレージングコンテンツに属する要素のみ
img要素はフレージングコンテンツに属する。なのでp要素の子要素として入れれる
p要素はフレージングコンテンツに属さない。なのでp要素の子要素として入れれない

p要素を用いたコーディングでのOK例とNG例は以下

OK（理由：p要素の子要素として、img要素を入れれる）

            
<p>
    <img src="https://developer.mozilla.org/ja/docs/Web/HTML/Element/table">
</p>

NG（理由：p要素の子要素として、p要素を入れれない）

            
<p>
    <p>テキスト</p>
</p>

Q3の解答

table要素の子要素として、div要素を入れれない

＜解説＞

table要素は子要素として、以下の要素を入れれる
・caption要素
・colgroup要素
・thead要素
・tbody要素
・tr要素
・tfoot要素
・スクリプト対応要素（script要素とtemplate要素）
div要素は上記のいずれでもない。なのでtable要素の子要素として入れれない。

table要素を用いたコーディングでのOK例とNG例は以下

OK（理由：table要素の子要素として、tr要素を入れれる）

            
<table>
    <tr>
        <td>テキスト</td>
    </tr>
</table>

NG（理由：table要素の子要素として、div要素を入れれない）

            
<table>
    <div>テキスト</div>
</table>

まとめ

最初はコンテンツモデルとカテゴリーを調べることを面倒と感じるかも知れません。

しかし、この調べ方を身につければ、「入れれる子要素を確認するために、サイトを何件もハシゴする」といった手間を省けます。

また、HTML Living Standard は信頼できる情報源です。ここから得た知識を持つことでより正確なコーディングができることでしょう。

「やっぱりコンテンツモデルを調べるのが大変」。という方は以下のサイトがおすすめです。
HTML5 入れ子チートシート
調べたい要素をクリックすると、親と子それぞれで使用できる要素がハイライトされます。

参考資料

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

【脱初心者】HTMLの入れ子ルールを理解する【調べ方が身につく】

コンテンツモデル

カテゴリー

メタデータコンテンツ（metadata content）

フローコンテンツ（Flow content）

フレージングコンテンツ（Phrasing content）

セクショニングコンテンツ（Sectioning content）

ヘッディングコンテンツ（Heading content）

エンベデッドコンテンツ（Embedded content）

インタラクティブコンテンツ（interactive content）

コンテンツモデル（ある要素に入れても良い子要素の集まり）の調べ方

div要素のコンテンツモデルを調べる

コンテンツモデルに則したコーディング、則していないコーディングの具体例

おさらい

実践！いろいろな要素のコンテンツモデルを調べる

まとめ

コメント