基本要素

!DOCTYPE

説明

そのHTML文書がどのような規則に則って書かれているかを示すものです。その文書型定義によってブラウザがどのように表示をするかを判断したりするのに必要です。

使用例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>愛犬ララの写真日記</title>
</head>
<body>
<p>内容</p>
</body>
</html>

DOCTYPE宣言の種類

DTD宣言を参照して下さい。他にもHTMLのバージョン毎に種類が存在します。

主な視覚系ブラウザによる表現

この宣言自体がブラウザに表示される事はありませんが、この宣言如何によって他の要素の表示の仕方が変化します。これは『DOCTYPEスイッチ』と呼ばれています。興味のある方は調べてみて下さい。

注意

HTML文書は必ず<html>から始まり</html>で終わるなどと解説されていたりしますがそれは 間違い です。HTML文書の場合はそのHTML文書がどのような文書型定義によって書かれているかを示すDOCTYPE宣言で始まります（XHTMLの場合はXML宣言）。

良くない例

<html>
<head>
<title>愛犬ララの写真日記</title>
</head>
<body>
<p>内容</p>
</body>
</html>

良くない理由

DOCTYPE宣言から始まっていない。

html

説明

そのファイルがHTML文書である事を示します。DOCTYPE宣言の直後に<html>を置き、最後尾に</html>を置きます。それより後に何かしらの要素が来る事はまずありません。そして中にはhead要素とbody要素を必ず一つずつ含みます。DOCTYPE宣言の種類によってはbody要素の代わりにframeset要素が入ることもありますが、その場合でもnoframes要素内にbody要素を記述します。

使用例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>愛犬ララの写真日記</title>
</head>
<body>
<p>内容</p>
</body>
</html>

注意

良くない例

<html>
<head>
<title>愛犬ララの写真日記</title>
</head>
</html>
<html>
<body>
<p>内容</p>
</body>
</html>

良くない理由

DOCTYPE宣言から始まっていない。
HTML要素が二組ある。
<html>の前にDOCTYPE宣言以外の要素がある。
</html>の後に要素がある。
html要素が二組ある。
<html>～</html>要素内にhead要素とbody要素が一つずつ登場していない。

head

説明

そのHTML文書の情報を記述する場所です。タイトルや著作者名、作成日など、そのファイルに必要な情報を埋め込みます。title要素は必須です。

使用例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>愛犬ララの写真日記</title>
</head>
<body>
<p>内容</p>
</body>
</html>

注意

HTML文書には必ずhead要素を含み、head要素にはtitle要素が必須です。つまりHTML文書には内容が無くともタイトルは必須だという事です。

良くない例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<p>内容</p>
</body>
<head>
</head>
</html>

良くない理由

head要素がhtml要素に続いていない。
title要素が無い。

title

説明

そのHTML文書のタイトルを表します。ここに記述されるタイトルは検索サイトに表示されたり、他サイトで紹介されたりするのに用いられます。ページの内容を簡潔に表現したわかりやすい題名を付けましょう。

使用例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>愛犬ララの写真日記</title>
</head>
<body>
<p>内容</p>
</body>
</html>

注意

トップページのタイトルはサイトの顔でもあります。それを読んだだけでどんな内容のWebサイトなのかが判断できるようなタイトルを付けましょう。多くの人がそのタイトルがサイトのタイトルであると判断します。

良くない例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title><h1>私のホームページ</h1></title>
</head>
<body>
<p>内容</p>
</body>
</html>

良くない理由

title要素は他の要素を内包する事はできません。
title要素からサイトの内容が判断し難い。

body

説明

そのHTML文書の内容を記述します。ここに記述された内容は各UAに判別され、それぞれの表現をし、それを利用するユーザに情報を提示します。

使用例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>愛犬ララの写真日記</title>
</head>
<body>
<p>内容</p>
</body>
</html>

注意

body要素の直下に置けるのはブロック要素のみです。文字列やインライン要素がそのまま置かれる事はありません。body要素内に記述されるものはその文書の構造を示す要素や内容だけで、装飾はCSSで行います。

良くない例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>愛犬ララの写真日記</title>
</head>
<body>
<img src="./image/hoge.gif" alt="代替テキスト">
</body>
<body>
<p>内容</p>
</body>
</html>

良くない理由

body要素直下にインライン要素であるimg要素がある。
body要素が二組ある。