HTML文書の基本構造は次のようになる。
※HTML文書の基本構造
<html>
<head>
head要素の内容(HTML文書に関する情報が書かれる)
</head>
<body>
body要素の内容(本文として表示される情報が書かれる)
</body>
</html>
HTML文書HTML documentは、1つの〈html要素〉html elementによって構成される。
〈html要素〉は、1つの〈head要素〉head elementと1つの〈body要素〉body elementによって構成される。
〈html要素〉、〈head要素〉、〈body要素〉は、同じHTML文書中で繰り返して使うことはできない(1回だけしか使えない)。
一般に、〈head要素〉の内容は、HTML文書のタイトルなどのHTML文書そのものに関する様々な情報を含む。〈body要素〉の内容は、ユーザエージェントを介してユーザに本文として表示される様々な情報を含む。
また、〈head要素〉と〈body要素〉は、必ず『〈head要素〉→〈body要素〉』の順番で記述する。
親要素と子要素
ある要素と別の要素とは、一方が上位で他方が下位という上下関係を作る。この上下関係を「入れ子(ネスト)nest」という。このとき、上位の要素を「親要素parent element / containing element」、下位の要素を「子要素child element」という。
<html> <head> 〜〜〜〜〜 HTML文書に関する情報が書かれる 〜〜〜〜〜 </head> <body> 〜〜〜〜〜 本文として表示される情報が書かれる 〜〜〜〜 </body> </html>
サンプルの「入れ子」は図で示したようになっている。ここでは、〈html要素〉が〈head要素〉と〈body要素〉の親要素であり、〈head要素〉と〈body〉要素は〈html要素〉の子要素である。
どの要素がどの要素の親要素になるか、どの要素がどの要素の子要素になるかについては、HTMLHyperText Markup Languageで定められている。例えば、〈body要素〉と〈head要素〉は必ず〈html要素〉の子要素にならなければならない。逆に、〈html要素〉は、〈head要素〉と〈body要素〉の親要素になるが、子要素にはならない。また、〈body要素〉は〈head要素〉の子要素にはならず、〈head要素〉は〈body要素〉の子要素にはならない。
※誤った記述の例:〈body要素〉が〈head要素〉の子要素になっている <html> <head> 〜〜〜〜〜〜〜〜〜〜 <body> 〜〜〜〜〜〜〜〜〜 </body> </head> </html>
※誤った記述の例:〈body要素〉が〈html要素〉の子要素になっていない <html> <head> 〜〜〜〜〜〜〜〜〜〜 </head> </html> <body> 〜〜〜〜〜〜〜〜〜 </body>
したがって、〈html要素〉と〈head要素〉と〈body要素〉の関係は、必ず次のようになる。
※HTML文書の基本構造(正しい「入れ子」)
<html>
<head>
head要素の内容(HTML文書に関する情報が書かれる)
</head>
<body>
body要素の内容(本文として表示される情報が書かれる)
</body>
</html>