DTD ドキュメントタイプとは
ドキュメントタイプ( Document Type Definition 、以下 DTD と示します)は、HTLM のバージョンをあらわすと理解すれば良いようです。具体的には、DTD の書き方によって、Web ブラウザでの表示モードが異なります。
表示モードには、標準モードと互換モードがあります。DTDは省略してもかまいませんが、省略した場合、表示結果は旧バージョンと同じ互換モードになります。有名サイトでも DTD を省略しているのを見かけますが、ブラウザやブラウザのバージョンによって見え方が変りますので、指定したほうが安心です。
DTDとブラウザの表示モード
DTD による一番大きな違いは、スタイルシート CSS で「width」を指定した場合のようです。異なる Web ブラウザでも同じように表示させるには、W3C で推奨されている標準モードをつかうのが一番良さそうです。「インターネットエクスプローラ６」や「ネットスケープ６．２」や「Macのインターネットエクスプローラ５」でも、標準モードなら、同じように表示される下記リストのバージョンがお勧めです。また、このバージョンは現在は推奨されていない要素や属性も含まれていますので、制約がゆるく使いやすいと思います。DTD には、大文字・小文字・スペースに意味がありますので、下記をそのままコピーして使うのが良いと思います。この宣言は、HTMLの文頭（ <html>より前）に、書きます。
"http://www.w3.org/TR/html4/loose.dtd">
標準モードと互換モードの違い
標準モードと互換モードの表示サンプル
左の図は、同じスタイルシートで画面レイアウトを指定したサンプルです。上の図が、標準モードで表示した場合、下が互換モードで表示した場合です。
「widht」の違いが確認出来ると思います。「widht」は、標準モードではコンテンツ（下記例では文字部）の幅になりますが、互換モードでは、ボーダー（枠線）やパディング（枠線と文字部の隙間）も含んでしまいます。
標準モードのほうが幅が広くなりますので、互換モードで記載していた HTLM を標準モードに書き換える場合は、注意が必要です。
標準モードと互換モードの表示サンプル
上記標準モードと互換モードの表示サンプルで使った共通のCSSソースです。ご参考にどうぞ。
width:250px; /* 幅250 */
border:solid 10px #555555; /* 濃いグレー枠線10ピクセル */
background-color:#cccccc; /* 背景グレー */
}
#main { /* mainのスタイル*/
width:120px; /* 幅120 */
padding:20px; /* 枠線と文字部の隙間20ピクセル*/
float:left; /* sideを右に表示する*/
border:solid 1px #55ffff; /* 水色枠線1ピクセル*/
background-color:#eeaaff; /* 背景（パディング）ピンク*/
}
#side { /* sideのスタイル*/
width:60px; /* 幅60 */
padding:8px; /* 枠線と文字部の隙間8ピクセル*/
margin-left:165px; /* 左から165ピクセル位置に表示 */
border:solid 1px #ffaaff; /* ピンク枠線1ピクセル*/
background-color:#ffffaa; /* 背景パディング）ピンク黄色*/
}
レンタルサーバーは、高機能なのに236円/月～
