どうも7noteです。今回は多くの要素の中で既に親子関係が決まっているタグを紹介していきます。

HTMLではたくさんのタグがありますが、既に親子関係の組み合わせが決まっているものがいくつかあります。
たとえば、ulの直下（直属の子要素）には必ずliを書かなければなりません。
このようにHTMLでは既に親子関係が決まっているタグの関係性があります。
その中でも頻出する要素を全て上げましたので、まだHTMLを初めて1ヵ月～2ヵ月の方はこの記事で親子関係を全パターン覚えていっていただければと思います。

親子関係の一覧

<!-- 順序のないリスト -->
<ul>
    <li></li>
</ul>

<!-- 順序があるリスト -->
<ol>
    <li></li>
</ol>

<!-- 定義リスト -->
<dl>
    <dt></dt>
    <dd></dd>
</dl>

<!-- テーブル -->
<table>
    <tr>
        <th></th>
        <td></td>
    </tr>
</table>

<!-- 選択ボックス -->
<select name="" id="">
    <option value=""></option>
</select>

※例外や滅多に出てこないタグなどは省いています。

解説

ulを例に見てみましょう

ulの直下の子要素には必ずliがきます。
ulの直下にdivやpを書くのはNGです。ulの中のliの中にdivやpを書くのはOKです。

<!-- li以外のタグはNG -->
<ul>
    <div></div>
    <p></p>
</ul>

<!-- OKの書き方 -->
<ul>
    <li></li>
    <li>
        <p></p> <!-- liの中に書くのはOK! -->
    </li>
    <li>
        <div></div>
    </li>
</ul>