親要素・子要素・兄弟要素

  • このエントリーをはてなブックマークに追加

html要素の関連性について

前回(第2回 HTMLの基本と必ず書かなければならないもの)で説明したHTMLソースを見ると、html要素の中にはhead要素とbody要素はが含まれています。このことを「html要素は、head要素とbody要素の親要素である」といいます。また反対に「head要素とbody要素はhtml要素の子要素である」といいます。

続いてhead要素とbody要素の関係について見てみると、どちらの要素に含まれているということはなく、それぞれが並んで書かれています。
このような要素の関係を兄弟要素と呼びます。

要素同士の関係と呼び方からわかるように、子要素(body要素)の中に子要素が出来た場合、親要素(html要素)からみれば孫要素と呼び、孫要素から見た子要素や親要素は先祖要素と呼びます。

要素の関連性はCSSでデザインを入れる時に知識として持っていると便利な場面があります。
樹形図などをつかって図式化すると関連性がよりわかりやすくなるのでおすすめです。

まとめ

・html要素の内側に書かれているhead要素とbody要素のことを「子要素」と呼ぶ。
・反対にhtml要素は「親要素」と呼ぶ。
・head要素とbody要素のように並んで書かれている関係を「兄弟要素」と呼ぶ。
・要素同士の関係を一目で分かるように「樹形図」が便利。これはCSSでデザインを考える時にも使える。

  • このエントリーをはてなブックマークに追加