HTMLでホームページを作る
DOCTYPE 宣言

HTML文書の一番最初に書くべきものについて、今までこのHP作成講座で、一言もふれてきませんでした。
それは、これ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
DOCTYPE 宣言と言われているもの。
これをHTMLの最初の行に書かなくてはいけない(ー凵[)b・・と言うことになっているのですが・・
だいたい、そのようなわけのわからないものが最初に出てくるので、初心者にはHTMLがとっつきにくいものになってしまうと思うのですが。。
サイコロTown!のほとんどのページを見てもらえばわかるとおり、このDOCTYPE 宣言は書いておりません。
なくても、それなりに表示されると思います。

ただし、きちんとHTMLのルールに従うならば、一応書く必要があることになっています。
・・で、ここでは、DOCTYPE 宣言とは何なのか?と言うことを書いておきたいと思います。
(HTMLの次の規格、XHTMLでは、どうもこれを書かないといけないようだし・・)

DOCTYPEとは、たぶんドキュメントのタイプ・・っちゅーこと。で、「今から書く文章は、このようなルールで書いている文章です!」と、最初に宣言して、IEなどのブラウザに知らせる働きのものです。
ブラウザは、このDOCTYPEで示されたHTMLのルールに従って、タグなどを解釈して表示する事になっています。(表向きは!)
そして、このDOCTYPE 宣言を書くと、シビアにそのルールに従った、HTMLを書かなければなりません。(表向きは!)
HTMLにはHTML Ver1.0から、HTML Ver4.01といろいろなヴァージョンがあります。 そして、それぞれのバージョンには少しずつ違いがあり、また、HTML Ver4.01には、Strict、Transitional、Framesetなどの違うHTMLのルールがあります。

で、さっきのDOCTYPE 宣言では、
"-//W3C//DTD HTML 4.01 Transitional//EN"
これが、W3C(HTMLの標準規格を提唱している組織)が定めた、“HTML Ver4.01のTransitional版のルールでずぞ!”と言うことを示す部分です。
で、このように書く。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

さらに正式に書くならば・・(正式に書かないとブラウザが正しく判断しないかもしれないし・・)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
と書きます。 "http://www.w3.org/TR/html4/loose.dtd"は表示するルールを定めたファイル(DTDファイル)の在処を示すアドレスです。
ちなみにhttp://www.w3.org/TR/html4/loose.dtd←ここをクリックすると、どんなものか見ることが出来る。

で、結局、このように書きます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

</head>
<body>

</body>
</html>
HTMLの先頭、<html>を書く前に、このDOCTYPE 宣言を書く!
ただ、このDOCTYPE 宣言を書くと、W3Cが定めたルールに厳密になるので、 ブラウザ独自のタグなどが無効になったりと、少しやっかいなこともあります。
HTML Ver4.01のDOCTYPE宣言で、そのあたりを調べてみましょうか。

HTML4.01StrictのDOCTYPE宣言
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML4.01に厳密に準所したルール。

HTML4.01TransitionalのDOCTYPE宣言
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML4.01に、昔からあるタグなどを加えて ちょいと緩和したルール。

HTML4.01FramesetのDOCTYPE宣言
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
フレームタグを使うページはこれを使う!フレーム+Transitional。

テスト用のソース
<!DOCTYPE HTML PUBLIC ・・各種DOCTYPE宣言・>
<html>
<head>
・・・中略・・・
</head>
<body>

divテスト
<div align="right">align="right"はどうか?</div>
<div align="center">align="center"はどうか?</div>
<div style="text-align:right">style="text-align:right"はどうか?</div>
<div style="text-align:center">style="text-align:center"はどうか?</div>
fontテスト
<font size="5" color="#ff0000">size="5" color="#ff0000"はどうか?</font>
<font style="color:#ff0000;font-size:x-large">
style="color:#ff0000;font-size:x-large"はどうか?
</font>
centerテスト
<center>centerタグ</center>
<center style=" text-align:center;">
ちょいと奇妙だがstyle=" text-align:center;"を入れると?
</center>
hrテスト
<hr align="center" size="5" width="300">はどうか?
<hr align="center" size="5" width="300">
<hr style="text-align:center;width:300px">はどうか
<hr style="text-align:center;width:300px">
marqueeテスト
<marquee>マーキーはどうなる?</marquee>
tableテスト
いろいろなテーブル
<table border="3" bgcolor="lime" width="200" vspace="8" align="center" hspace="12" cellspacing="14" cellpadding="8">
<caption>テーブル</caption>
<tr align="center" valign="middle" bgcolor="#ffff80">
<td>あ<br>あ</td><td align="right">い</td>
</tr>
<tr>
<td align="right" valign="middle" bgcolor="#ffff80" width="40">う</td><td nowrap="nowrap">えおかきくけこ</td>
</tr>
<tr>
<td colspan="2">さ</td>
</tr>
</table>

<table cellspacing="14" cellpadding="8" style="background-color:lime;text-align:center;border-style:outset;border-width:3px;width:200px" vspace="8" hspace="12">
<caption>テーブル</caption>
<tr style="background-color:#ffff80;text-align:center;vertical-align:middle">
<td>あ<br>あ</td><td style="text-align:right">い</td>
</tr>
<tr>
<td style="background-color:#ffff80;text-align:right;vertical-align:middle;width:40px">う</td><td>えおかきくけこ</td>
</tr>
<tr>
<td colspan="2">さ</td>
</tr>
</table>

<table border="1" background="pic/4.gif">
<tr>
<td>border="1" background="pic/4.gif"</td>
</tr>
</table>

<table style="background-image:url(pic/4.gif);border-style:outset;border-width:1px">
<tr>
<td>style="background-image:url(pic/4.gif);border-style:outset;border-width:1px"</td>
</tr>
</table>
b、iテスト
文の中で<b>ここは太字</b>、<i>ここは斜体</i>、<b><i>ここは太字&斜体</i></b>です。

listテスト
<ul type="circle">はどうか?
<ul type="circle">
<li>liタグの閉じタグあり</li>
<li>liタグの閉じタグあり</li>
<li>liタグの閉じタグ省略
<li>liタグの閉じタグ省略
</ul>
<ul style="list-style-type:circle">はどうか?
<ul style="list-style-type:circle">
<li>liタグの閉じタグあり</li>
<li>liタグの閉じタグあり</li>
<li>liタグの閉じタグ省略
<li>liタグの閉じタグ省略
</ul>
<ol type="1" start="10">はどうか?
<ol type="1" start="10">
<li>liタグの閉じタグあり</li>
<li>liタグの閉じタグあり</li>
<li>liタグの閉じタグ省略
<li>liタグの閉じタグ省略
</ol>
<ol style="list-style-type:decimal">はどうか?
<ol style="list-style-type:decimal">
<li>liタグの閉じタグあり</li>
<li>liタグの閉じタグあり</li>
<li>liタグの閉じタグ省略
<li>liタグの閉じタグ省略
</ol>

</body>
</html>
上記のソースは、W3Cの仕様を全く気にせず、W3Cが推奨しない属性、推奨しないタグを記述してあります。
このソースで、DOCTYPE宣言あり(HTML4.01StrictとHTML4.01Transitional)、そしてDOCTYPE宣言なしで実際に表示してみるとどうなるでしょう?
ブラウザの種類、ヴァージョンによって、結果は違うと思いますので、いろいろなブラウザを持ってる人は、ブラウザを変えて見てみると良いでしょう。

HTML4.01Strict DOCTYPE宣言あり
2005年1月10日時点で、WindowsXP sp2のIE6が私の環境ですが、
なんと、非推奨タグ・属性(fontタグや、align属性など)も有効になってますねぇ。
マーキーまで動いているのが笑える(* ̄m ̄)ぷっ!
ま、しかし、このページを見ている人のブラウザでは、どう見えるのか?もしかするとブラウザ独自のタグやW3C非推奨のタグ・属性は無効になっているかも知れないですな。

HTML4.01Transitional DOCTYPE宣言あり
HTML4.01Strictと何にも変わらねぇ〜〜〜〜。ズコッ(o_ _)o
W3C非推奨のfontやcenterが有効なのは当然かも知れないけど、マーキーまで動いてるとは・・
ま、これもブラウザの違いによっては変わるかもね。
もしかすると、DOCTYPE宣言をしているくせに、W3C非推奨の記述をしまくっているので、IEが気を利かせてDOCTYPE宣言を無視しているのかな?。。

で、DOCTYPE宣言なしだとこうなる。
_(*_ _)ノ彡だはは。。この時点での私の環境では、ぜ〜〜〜〜〜〜んぶ同じだぁ〜〜!

ま。DOCTYPE宣言っちゅーのは、そのページがどのようなルールで書かれているかを、最初に宣言してブラウザに明確に示すことが目的だからね。
それをブラウザがどう解釈するのかはブラウザの勝手だっ!
しかし、DOCTYPE宣言を書くならW3Cの仕様どおりに準処した方が良いでしょうな。
ブラウザによっては、内容がぐちゃぐちゃに表示されるかも知れないからねぇ。

PC−PARKトップに戻る

心の話サイコロTown!へ
広告 [PR]  再就職支援 冷え対策 わけあり商品 無料レンタルサーバー