要素の親子関係/HTML基礎講座

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

■ 要素のツリー構造

HTMLは文章の論理構造を示すものなので、文書は必然的にツリー (tree) 構造となります。どのようなツリー構造となるかは文書によって異なりますが、通常、HTML文書の最上位に位置する html要素の中で、基本的な文書情報を head要素に、コンテンツは body要素の中で配置されます。同様に、body要素の中では、文書の要素内容によってツリー構造が展開されることになります。

この構造において、１つの上位の階層にある要素を「親要素」と言います。逆に親要素から見てその階層下にある要素は「子要素」となります。

下記のサンプルソースをご覧下さい。

<html>
<head>
   <title>ツリーとなる論理構造</title>
</head>

<body>
  <h1>段落構造</h1>
  <ul>
    <li>ツリー構造</li>
    <li>文書構造</li>
  </ul>
  <h2>ツリー構造</h2>
  <p>ツリー構造（document tree）とは
  <strong>１本の木から伸びる根</strong>
  のような構造のことです</p>
</body>
</html>

li要素は ul 要素にはさまれています。

つまり、この HTMLにおいては li要素の親要素は ul要素となります。

同じように、 ul要素の親要素は body要素で、逆に body要素は、子要素 h1、ul、h2、p などの要素を持つことになります。

また、スタイルシートにおいては、このような親要素、子要素の関係によってセレクタの設定やデフォルト値、継承などに影響があります。

このような親要素、及び子要素の関係を理解しておくことは、HTML作成にとって、文書構造を構築する上で、非常に重要なポイントになります。

■ サンプルコードのツリー構造

ツリー構造

初版公開日 2002年5月18日最新更新日 2004年3月7日

■ 要素の親子関係