WEBトレ

入れ子構造

親と子の関係性

コード内において、要素を囲っている側を親要素、囲われている側を子要素と呼びます。イメージとしてはマトリョーシカが近いですが、コードは子を多重構造にすることができます。
多重構造とは<ul><li>のように、親:<ul>のなかに、子:<li>が無制限に入るという形を指しています。

HTMLには開始タグと閉じタグで囲っていくというルールがありますが、単にテキストを囲うだけでなく「テキストを囲っているタグをさらに別のタグで囲う」ということができます。
このように要素をまた別のタグで囲うことを入れ子にするといいます。

例 :

上記の場合
<nav>の中に<p><ul>、<ul>の中に<li>、<li>の中に<a> といった形で入れ子になっています。

入れ子はどれだけ囲っても大丈夫ですが、注意しなければいけいないルールがあります。それは別のタグの閉じタグとクロスしてはいけないということです。

例 :

上記は132行目の<li>と<a>の閉じタグがクロスしてしまっている状態です。
開始タグと閉じタグがしっかりと対応していないとブラザウでの表示が崩れてしまうので、囲った際に別々の閉じタグがクロスしないように注意しましょう。

タグの囲み方にはルールがあり、<div>はほとんどの要素を囲うことができますが、<p>は<h1>~<h6>などの見出し要素を囲うことができません。
このように、タグごとに囲うことのできる要素が決められています。