HTML講座 - HTMLの構造

HTMLの構造

前回解説した要素を使って、いよいよ今回からHTMLを書いていきます。

それではまず、html要素の解説します。これは、「HTMLで出てくる要素」ではなく「html」という名前の要素があるので間違えないようにしましょう。ただ、前者を指して「HTML要素」という言い方もあるので、場合に応じて区別するようにしましょう。

html要素は、そのページ全体です。というのも、html要素で表される部分が、そのページになるのです。すなわち、さっきのindex.htmlに次のように書きます。

<html>
中身
</html>

このように、html要素の中身にページの内容を書くということになります。

もう1つ、HTMLの根幹を担う重要なものがあります。それが入れ子です。入れ子とは、要するに、要素の中に要素があることです。

そもそも、HTMLは全部html要素の中に書くのですから、当然その中に他の要素も入ることになります。このように、他の要素の中に入れ子になって入った要素などを子といいます。逆は親です。

つまり、HTMLでは、入れ子関係によって、頂点にhtml要素があり、その子としていくつかの要素があり、さらに子にまた要素があり、…というようにhtml要素を頂点として広がっていくのです。このような構造を木構造といいます。また、頂点の要素（html要素）をルート要素といいます。

それでは、具体的にhtml要素の子にはどんなものが入ってくるのか見てみましょう。

実は、head要素とbody要素の2つの要素が順にあることになっています。他の要素は入ってはいけません。つまり、こういうことです。

<html>
<head>
</head>
<body>
</body>
</html>

ここで、head要素とbody要素はhtml要素の子であるというわけです。ちなみに、親子関係を見やすくするために次のようにインデントして書くことがあります。

<html>
  <head>
  </head>
  <body>
  </body>
</html>

ルート要素。

head要素+body要素。

HTMLのルート要素。

さて、次に、このhead要素とbody要素を解説します。

メタデータ・コンテンツ。

文書のメタデータ（付属データ）を記述する。

このhead要素は、文書に付属するデータを記述するものです。文書に付属する情報とは、例えばタイトルです。このページの場合、「HTML講座 - HTMLの構造」というようになっています。そういった情報を記述します。

セクショニング・ルート。

フロー・コンテンツ。

文書のコンテンツを記述する。

続いてbody要素ですが、これこそがまさにHTML文書の本体ともいえる部分です。このbody要素に書いたことこそが実際にページの中身として表示されるのです。

HTMLの基本構造を紹介したところで、今回は終了です。次回、さらに補足説明を加えた上で実際に作ったページを表示してみましょう。