ホームページを作ろう-1.4 少し勉強しよう（その２）-要素の階層構造

ホームページを作ろう-1.4 少し勉強しよう（その２）-要素の階層構造

PDF版（http://hitp.konjiki.jp/pdf/pBookHP1.pdf）の５ページ，あるいはWeb版（http://poem.kagebo-shi.com/html/c04.html）の「1.4 少し勉強しよう」の部分にある「要素は入れ子構造（階層構造）になる。」と「html要素をルート（根）要素と言う。」に関する説明です。

例えば，a1とa2という２つの要素があり，次のように記述したとします。

<a1>..........<a2>..........</a1>..........</a2>

このときそれぞれの要素関係は次のようになります。

<a1>..........<a2>..........</a1>..........</a2>
 |             |              |              |
 +----------------------------+              |
               |                             |
               +-----------------------------+

この場合，a2要素が一見するとa1要素の内側にあるように見えますが，終了タグの位置から見るとa1要素がa2要素の内側にあるように見えます。つまり，どちらが外側か内側か確定できない状況にあります。

このような記述は，ホームページ作成ではできません。

もし，a2要素がa1要素の内側になるとすれば，次のように記述します。

<a1>..........<a2>..........</a2>..........</a1>
 |             |              |              |
 |             +--------------+              |
 +-------------------------------------------+

このように記述すれば，a2要素はa1要素に完全に内包されることになります。このような記述の方法を「完全入れ子構造」と呼びます。また，要素の関係からは「階層構造」あるいは「木構造」と呼ばれるものになります。

これを図解すると次のように表現することができます。

a1要素
  |
  +-- a2要素

同様に，サンプルを木構造で表現すれば，次のようになります。

html要素
 |
 +-- head要素
 |     |
 |     +-- title要素
 |          |
 |          +-- 文字列
 +-- body要素
       |
       +-- p要素
            |
            +-- 文字列

ホームページ作成において，タグを記述する場合，完全入れ子構造で記述した形式を「整形式」と呼びます。そして，HTMLファイルは，必ずこの整形式でなければなりません（このルールは，実際には，XMLのルールです）。

そして，木構造の先頭の要素，ここでは「html要素」ですが，この最初の要素のことを「ルート要素」といいます。

なお，テキスト中では，記述していませんけど，このような要素によって表現される文書の構造をモデル化したものを「文書オブジェクトモデル（DOM）」ともいいます。

次回は，DTD（文書型宣言）について説明します。