要素の親子関係

HTMLの要素は、ある要素がある要素を含み、さらにその要素が別の要素を含む、というように階層的な構造であらわされます。そして、この関係は一般的に親要素、子要素、孫要素などと、親子関係にたとえられて表現されます。

要素のツリー構造
HTMLは文章の論理構造を示すものなので、文書は必然的にツリー (tree) 構造となります。どのようなツリー構造となるかは文書によって異なりますが、通常、HTML文書の最上位に位置する html要素 の中で、基本的な文書情報を head要素に、コンテンツは body要素 の中で配置されます。同様に、body要素 の中では、文書の要素内容によってツリー構造が展開されることになります。
この構造において、1つの上位の階層にある要素を「親要素」と言います。逆に親要素から見てその階層下にある要素は「子要素」となります。
下記のサンプルソースをご覧下さい。
<html>
<head>
   <title>ツリーとなる論理構造</title>
</head>

<body>
  <h1>段落構造</h1>
  <ul>
    <li>ツリー構造</li>
    <li>文書構造</li>
  </ul>
  <h2>ツリー構造</h2>
  <p>ツリー構造(document tree)とは
  <strong>1本の木から伸びる根</strong>
  のような構造のことです</p>
</body>
</html>
li要素ul 要素にはさまれています。
つまり、この HTMLにおいては li要素の親要素は ul要素 となります。
同じように、 ul要素 の親要素は body要素 で、逆に body要素は、子要素 h1ul、h2、p などの要素を持つことになります。
また、スタイルシートにおいては、このような親要素、子要素の関係によってセレクタの設定やデフォルト値、継承などに影響があります。
このような親要素、及び子要素の関係を理解しておくことは、HTML作成にとって、文書構造を構築する上で、非常に重要なポイントになります。
サンプルコードのツリー構造

ツリー構造



This Page is HTML4.01 Valid! 初版公開日 2002年5月18日   最新更新日 2004年3月7日
Copyright(C) 2002〜2008 banban