文書型(DOCTYPE)宣言

大切な1行

ほぼ完成を見たHTML文書ですが、文書の先頭にもう1行だけ付け加えなければなりません。

それは、「この文書は、HTMLによる既定のマークアップルールに則って作成されています」という宣言です。今まで説明してきたとおりにHTML文書を作成した場合、(実は)HTML 4.01 Strictというルールに則っていますのでこの宣言を行なうことが出来ます。この宣言のことを文書型(DOCTYPE)宣言と言います。

しかしながらW3Cは、「全てのHTML文書は文書型宣言を行なうべきである」とおっしゃっています(SGML としての HTML と考えるなら当然なのでしょう)。と言うことは、「既定のHTMLのルールに則りHTML文書を作成し、必ず文書型宣言を行なう」のがより自然でより適切な態度だと言えます。

追加 - 文書型(DOCTYPE)宣言を書くべきである最大の理由
ブラウザは、文書の先頭に書かれた文書型(DOCTYPE)をまず読み取ります。それにより、以降のソースがどの文書型で書かれているかを知ることができます。文書型を知った上で文書を解釈できるわけです。つまり、(以降のソースが文書型どおりの文法に則って作成されていれば)ブラウザは文書の解釈をしやすくなりますし、また作者が意図したとおりに解釈される可能性がグッと高まります。(正しい文法で書いているのに誤解されたとしたら、それはブラウザの出来が悪いということですね)
このように文書型(DOCTYPE)宣言を書くことで、ブラウザ等のUser Agentに作者の意図をきちんと伝えることが出来るようになります。
参考
文書型宣言についてPC Tips
文書型を選択しようPersonnel

HTMLによるマークアップのルールは、仕様書の元になっている文書型定義(Document Type Definition、DTD)というもので事細かに規定されています。HTMLには複数のバージョンがあり、そのそれぞれについてDTDによって定義されているのです。よって、文書型(DOCTYPE)宣言を行なうということは、「HTMLのどのバージョンのDTDに基づいて書かれているのかを示す」ということになります。

この講座は、すべてHTML4.01というバージョンに基づいて書いています。このHTML4.01には3種類あり、それぞれ

HTML 4.01 Strict
http://www.w3.org/TR/html4/strict.dtd
HTML 4.01 Transitional
http://www.w3.org/TR/html4/loose.dtd
HTML 4.01 Frameset
http://www.w3.org/TR/html4/frameset.dtd

と呼ばれています。(この中でHTML 4.01 Framesetはフレームを利用する場合のベースになる文書において宣言するものであるため、説明はまた別の機会にさせていただきます。)HTMLの各バージョン名の下に示したURLがそのバージョンのDTDです。

HTML 4.01 StrictとHTML 4.01 Transitionalとではいったいどう違うのでしょうか? 簡単に言うとHTML 4.01 Strictのほうがより厳格なルールであると言えます。HTML 4.01 Strictは「文書の構造を示す以外の、レイアウト等に関するマークアップを極力排除したもの」だからです。

当講座ではHTML 4.01 Strictを中心に扱っていきたいと思います。そのほうが、HTMLを学ぶに際しわかりやすいと思うからです。レイアウト等については後ほど説明したいと思っているCSS(Cascading Style Sheets)に任せるほうが合理的かつ効率的である、というのが私の考え方です。

それでは、ほぼ完成を見たHTML文書に文書型(DOCTYPE)宣言の記述を入れましょう。HTML 4.01 StrictのDTDに則って書いてますよ、と宣言します。書き方は以下のとおりです。

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

または、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

それでは文書の先頭に文書型(DOCTYPE)宣言を書き加えて、HTML文書を完成させましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>私のパソコン日記</title>
</head>
<body>
<h1>私のパソコン日記</h1>
<h2>平成15年4月13日</h2>
<h3>ウェブサイト作成に挑戦!</h3>
<p>今日、自分でウェブサイトを作ってみる決心をしました。今はまだ何が何だかわからないけど、ちょっとがんばってみようかな?って思っています。今日がその第一日目です。この日記が自分にとって初めてのウェブサイトです。</p>
<p>いろんな本を読んだり、いろんなサイトを見たりして勉強中なんですが、なかなか思うようにはいきません。一度にマスターできるわけはないので、コツコツ毎日勉強していきたいと思います。</p>
<h3>今日嬉しかったこと</h3>
<p>以前からずーっと好きだった人に、実は告白しました(^O^)。「付き合ってください」って。そしたらなんと、速攻でOKもらえたんです~♪ え~、信じられな~い。マジっすか? ホントに付き合ってもらえるんですか?</p>
<p>彼はニコッと笑って静かに頷いてくれました。ヤタ~、\(^o^)/。今まで生きてきた中で一番幸せです。</p>
<p>明日から二人でパソコンのお勉強だ~。がんばろ。イエッ~。(^O^)</p>
</body>
</html>

ついに完成ですね!(っておそらく見た目は未完成文書と全然変わってませんが・・・汗)

Information