htmlの全体構造

大雑把に、htmlの全体構造について解説。

※この記事は2005年にこのサイトを制作した当時の記事ですので、現在の状況とかなり異なっている場合があります。

htmlの全体構造の把握

ホームページビルダー等のホームページ作成ソフトを使えば、ページ構造については考えなくてもホームページは作れますが、知っておくと、全てをわかった感じがして気持ちいいです。（笑）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> （↑DOCTYPE宣言・HTMLのバージョンを宣言）
<HTML>（HTML要素・DOCTYPE宣言後、残りを囲みます。ここから）
　<HEAD>
　　（HEAD要素・ここに書いたものは表示されません。）
　</HEAD>
　<BODY>
　　（BODY要素・ここにページの内容を書きます。）
　</BODY>
</HTML>（HTML要素・DOCTYPE宣言後、残りを囲みます。ここまで）

実はページの構造はたったこれだけです。

DOCTYPE宣言

はじめにDOCTYPE宣言と呼ばれるものを置きます↓

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

これ↑はHTMLのバージョンと種類を表すものです。
フレームを使う人や、xhtmlを使う人や、「表示を指定するタグ」を使わない人はちょっとだけ違った文書宣言をします。

「Transitional」というタイプは「表示を指定するタグ」を使う場合（何でもありな場合）です。ホームページビルダーを使うと、自動的にこのタイプのDOCTYPE宣言が挿入されます。

実際は、DOCTYPE宣言については何も考えないで大丈夫です！たぶん。

HTML要素

DOCTYPE宣言の下にはHTML要素が続きます。
つまり、残り全体を、<HTML>から</HTML>で囲みます。

全ての要素はこの中に書き込まれます。

HEAD要素

HTML要素の中にまず、HEAD要素を入れます。
つまり、<HEAD>から</HEAD>で囲まれた部分です。

この<HEAD>から</HEAD>の部分には「そのHTML文書に関する情報」を入れます。ここに入れた情報はブラウザ（画面）には表示されません。

必ず「title要素」を入れます。まあ、ホームページビルダーでは自動的に
<TITLE></TITLE>
というように挿入されているので安心です。
<TITLE>から</TITLE>の間に、何も入れないと、「タイトルなし」になります。

ちなみに、このページは
<TITLE>htmlの全体構造</TITLE>となっています。

その他に、HEAD要素では、文字コードの指定や、その文書に関する説明やキーワード、スタイルシートに関する指定、著作者の表示などができます。

BODY要素

HTML要素の中には、HEAD要素の次にBODY要素を入れます。
つまり、<BODY>から</BODY>で囲まれた部分です。

この<BODY>から</BODY>の部分には「ブラウザに表示させたい内容」を入れていきます。つまり、画面に表示されているものは全て<BODY>から</BODY>に書かれています。