HTML【 要素の親子関係】をわかりやすく説明するよ!

HTMLを理解する上で重要な『要素の親子関係』についてわかりやすく説明していきたいと思います。

要素の親子関係

HTMLの全ての要素は、親子関係が成り立っています。例えば、『body要素にはp要素が入っている。
このような状態をHTMLコードで表すと、

<body>
<p></p>
</body>

このときbody要素の子は、p要素、p要素の親は、body要素ととなります。
p要素はスペース、または、タブでbody要素よりインデントすることで『body要素の子はp要素だよ』とわかりやすいように記述するのが一般的です。

要素のツリー構造

HTML文書の構造は一般的にツリー(tree)構造,または、(木構造)と呼ばれています。
木の画像を逆さまにしてみるとイメージしやすいです。

木の根っこが全ての要素の親となります。それがどんどん枝分かれして、子要素が作られていくイメージです。
下記のHTMLコードを見てください。

<html>
<head>
<title>title要素の親はhead要素</title>
</head>
<body>
<h1>h1要素の親はbody要素</h1>
<ul>
<li>li要素の親はul要素</li>
<li>li要素の親はul要素</li>
</ul>
<h2>h2要素の親はbody要素</h2>
<p>p要素の親はbody要素
<strong>strong要素の親はp要素</strong>
</p>
</body>
</html>

上記のコードをツリー構造で図にしてみました。

上記のHTMLコードの根っこ、つまり全ての要素の親というのは、html要素で、人間で例えるならご先祖様ということになります。
html要素(根っこ)のhead要素body要素

html要素(根っこ)のtitle要素h1要素ul要素h2要素p要素

html要素(根っこ)のひ孫li要素strong要素

逆に子がいない要素は、title要素li要素strong要素ということになります。
木構造で言うと枝の末端部分になります。

HTMLを覚えていく上でツリー構造はぜひ覚えておきたいところです。

以上!


自作WEBアプリ集


管理人があまりに暇人なため、しょうもないwebアプリを作ったりしてます。見てやってください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA