1-2-2a HTMLの基本構造 (ソースの中身)

HTML文章の中身(ソース)を見ると、下記のような文章が出て来るかと思います。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> (※1)
<html lang="ja">  (※2)
<head> (※3)
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS"> (※4)
<title>ページタイトル</title> (※5)
</head>
<body>ここに本文が書かれます</body> (※6)
</html>

もう少し詳しい構造は こちら(4-1 ベースになるHTML文章) をご覧下さいませ。

[ 関連事項 : HP-TIPS > HPの作り方 > ソースの見方 ]

ドキュメント宣言 (※1)

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

これは一番最初に文章型宣言(ドキュメント宣言)をし、HTML文章の中でも 『HTML 4.01 Transitional』 と呼ばれている物で作成しておりますとコンピューターに宣言をしているものです。まれにこの宣言を記載せず直接<html> ~ </html>からHTML文章を作成される方もおられますが、出来るだけ記述するようにして下さい。

HTML要素 (※2)

<html> ~ </html>

文章型宣言(ドキュメント宣言)の後に書きます。 (※1)で記載されたドキュメント宣言を除けば、全ての文章(タグ)はこの<html> ~ </html>で囲まれている必要があります。決して</body>や</head>で終わるような事が無いようにして下さい(エラーが出ます)。

※ 上記の見本では<html>の「lang」属性(言葉の属性)に「ja」を使用しております。日本語で文章を書かれる方は上記のように記載して下さい。(英語で書かれる方の場合、「ja」ではなくて「en」になります)

HEAD要素 (※3)

<head> ~ </head>

HEAD(ヘッダー)要素(またはヘッダー部)と呼ばれております。 主に「title要素(必須)」や「meta要素(HTML文章の情報 -- 製作者名や文字コード等)」、「script要素」や「style要素」が記載される場所です。 必ず<html lang="ja">と書いたすぐ下で、なおかつ<body>要素の上になるように記述して下さい。

[ 関連事項 : HP-TIPS > HPの作り方 > HEAD要素とは ]

META要素 (※4)

<meta>

META(メタ)要素です。このMETA要素は必ずHEAD要素の中で記述する事が決められております。上記の見本ではMETA要素の中でも「文字コード」にあたる部分を記載しております。この記述が無いと文字化けを起こしやすくなってしまいますので、必ず記載するようにして下さい。文字コードは「Shift_JIS」の他にも「EUC-JP」や「UTF-8」などといった物がございます。

[ 関連事項 : HP-TIPS > HPの作り方 > META要素とは ]

TITLE要素 (※5)

<title> ~ </title>

TITLE(タイトル)要素(またはタイトル部)と呼ばれております。ここに「ページのタイトル」を記載して下さい。 このTITLE要素は必ずHEAD要素の中で記述する事が決められております。(ここで表示される文章は本でいう所の「背表紙」に当たります。他の本と見間違えたりする事の無いような名前を付けて下さいね)。設定していない場合は、そのページのURLが直接表示されます。

BODY要素 (※6)

<body> ~ </body>

BODY(ボディ)要素(またはボディ部)と呼ばれております。 ここに記述された物がページの本文(ブラウザで見た時に実際に表示される部分)になります。

1-2-2b HTML文章とは

HTML文章は 『HEAD』 要素と 『BODY』 要素の二つから成り立っております。 ちょっとだけ難しいお話になってしまいますので、先にHTML文章を作成する上での簡単な決まりごとから説明して行きます。 (HEADとBODYに関する詳しい図解は 『1-6 HTMLの仕組 (親要素、子要素)』 を参照して下さい)。