基本要素

!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>
良くない理由

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文書は必ず<html>から始まり</html>で終わるなどと解説されていたりしますがそれは 間違い です。HTML文書の場合はそのHTML文書がどのような文書型定義によって書かれているかを示すDOCTYPE宣言で始まります(XHTMLの場合はXML宣言)。
良くない例
<html>
<head>
<title>愛犬ララの写真日記</title>
</head>
</html>
<html>
<body>
<p>内容</p>
</body>
</html>
良くない理由

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>
良くない理由

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>
良くない理由

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>
良くない理由

[ トップページ ] [ 目次 ] [ ページの先頭 ] [ ブロック要素 ] [ インライン要素 ]