HTMLの基本構造
HTMLドキュメント（文書）は 「DOCTYPE宣言」を除くその他のすべての内容を<html>タグで囲まれた構造をしています。HTMLと解釈されるのは<html>タグの内側にあるもので、すべての要素が<html>タグの内側に配置しなければなりません。また、「html要素」の子要素として直接配置できるのは「head要素」と「body要素」を順に1つずつだけというルールがあります。
次のコードは、最小限の要素によって構成されたHTMLの構造です。
最小限の要素によって構成されたHTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文書のタイトル</title>
</head>
<body>
文書の本体
</body>
</html>HTMLの文書構造はhtml要素の中にhead要素とbody要素を１つずつ持つ入れ子構造になっています。次の図はHTMLの基本構造を構成する3つの要素を表しています。
Note
DOCTYPE宣言はHTMLのバージョンなどをWebブラウザに伝えることが目的で記述するものです。Webブラウザはこの宣言の内容に従って文書を表示します。HTMLファイルの先頭（<html>タグより前）に書く必要があります。
head要素とbody要素の役割
head要素とbody要素にはそれぞれ明確な役割があります。head要素は主にコンピュータが読み取るための情報を、body要素にはコンピュータと人間の両方が読み取る情報を記述します。body要素の内容の大部分はWebブラウザに表示されるものです。
head要素に入る要素
head要素にはコンピューター（検索エンジンやブラウザ）が読み取るためのWebページの基本情報（メタ情報）を記述する部分です。head要素に書かれる情報のほとんどはソースコードを調べない限り見えることはありません。
head要素の中に入るのは文書のタイトルを表す「title要素」、文字コードやキーワード、説明を設定する「meta要素」、関連ファイルの情報を設定する「link要素」などがあります。ここに記述されるもののほとんどはWebブラウザに表示されませんが、文書のタイトルを表すtitle要素の内容はWebブラウザのタイトルバーやタブ部分に表示されます。
body要素に入る要素
body要素にはwebページのコンテンツを記述する部分で、<body>～</body>の範囲内に記述します。body要素の中に書かれるコードは、大半がWebブラウザに表示されるものです。情報のメインとなる文章や、画像・動画・音声などの様々なメディア、入力機能などを持った要素のすべてがこのbody要素の中に記述され、そのほとんどの要素がCSSによってレイアウトしたり装飾することができます。