HTML5と4.01のDOCTYPE宣言の正しい使い方とまとめ

宣言

WEBサイトを作る時、DOCTYPE宣言って書いてます? 人によっては絶対DOCTYPE宣言を書かないとダメという人もいますが、実はこれ、書かなくてもいいんです。

このページでは「doctype宣言を書いた時と書かなかった時の違い」などをご紹介します。 その前に、HTML5とHTML4.01のDOCTYPE宣言の使い方どこが違うのかどのdoctypeを使えばいいのか、について紹介しますね。

目次
結局DOCTYPEは宣言した方がいいの?

doctype宣言の使い方

doctypeとは、htmlドキュメントがどのバージョンで書かれているかをwebブラウザに伝えるためのタグ(タグというか目印)です。 なのでhtmlドキュメントの一番最初に書く必要があります

また色々なdoctype宣言の書き方を見かける事があると思います。 「どこが違うの?」って思いますよね。

実は書き方によってモダンブラウザの表示方法が「互換モード」「標準準拠モード」に変わるんです。

互換モードとは

バージョンが古いHTMLで書かれたページでも表示できるようにするモード。

文法をミスしてもブラウザがカバーしてくれる。
ただし、cssが正しく解釈されないので、レイアウトが崩れる可能性もある。 (サイト制作者の思ったように表示されない可能性がある)

標準モードとは

仕様通りにcssを正しく解釈して表示するモード。

互換モードと違い、文法ミスは無視される。

ここが一番注意すべきポイントです。

各モードごとにcssの解釈が変わるので、webサイトの見た目が変わっちゃいます。

ちなみにDOCTYPE宣言を書かないと「互換モード」となります。 どこが変わるのかは後ほど紹介しますね。

doctype宣言の書き方を覚える

まずはdoctype宣言の書き方を紹介しますね。

最近まで多く使われていたHTML 4.01では下のような書き方をしていました。

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

ですが2014年にHTML5が正式勧告されました。

そのため現在ではHTML5でwebサイトを作成する事が標準となっています。 ですので、基本的にはhtml5のDOCTYPE宣言okということになります。

html5のDOCTYPE宣言

<!DOCTYPE html>

「DOCTYPE宣言についてイマイチわからない」「どれを書けばいいかわからない」 と言う時はHTML5のDOCTYPE宣言を書いておけば、基本的には大丈夫です。

DOCTYPE宣言に大文字・小文字の区別はありません。 なので下のように書いても大丈夫です。

<!DOCTYPE HTML>
<!doctype html>

doctype宣言を記述する場所は、htmlドキュメントの一番上になります。 下が記述例です。

<!DOCTYPE html>
<html>
<head>
<title>タイトル</title>
</head>
<body>
</body>
</html>

HTML 4.01とXHTML 1.0の書き方

必要ないと思いますが、HTML 4.01とXHTML 1.0の3種類の書き方を紹介します。

html4.01には3種類のDTDがあります。

DTDとは、そのバージョンで使う事のできる属性や要素、配置などのルールを定義するものです。 つまり用途によって使い分ければいいのです。

DTDにはStrict(厳密型DTD)、Transitional(移行型DTD)、Frameset(フレーム設定型DTD)の3種類があります。

Strict(厳密型DTD)

Strict(厳密型DTD)では、非推奨の要素や属性は使えません。 フレームも使えません。

要素の配置なども細かい決まりごとがあります。

CSSを理解している方向け。

HTML 4.01 Strict DTD

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

XHTML 1.0 Strict DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional(移行型DTD)

非推奨の要素や属性が使えます。ですがフレームは使えません。

HTML 4.01 Transitional DTD

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

XHTML 1.0 Transitional DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Frameset(フレーム設定型DTD)

フレームを使う事ができます。 フレームを設定したい時には、この宣言を使います。

HTML 4.01 Frameset DTD

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

XHTML 1.0 Frameset DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

非推奨の要素と属性のまとめ

オレンジの背景の部分の属性と要素が非推奨となります。

非推奨の要素 非推奨の属性 代替可能なCSS
<applet>
<basefont> size font-size
<body> bgcolor background-color
background background-image
text color
link (a:link)color
vlink (a:visited)color
alink (a:active)color
<br> clear clear
<caption> align text-align、caption-side
<center> text-align
<dir>
<div> align text-align
<dl> compact
<font> size font-size
color color
face font-family
<h1>-<h6> align text-align
<hr> size height
width width
align text-align、margin
noshade
<html> version
<iframe> align vertical-align、float
<img> align vertical-align、float
border border
hspace margin
vspace margin
<input> align vertical-align、float
<isindex>
<legend> align
<li> type list-style-type
value
<menu>
<object> align vertical-align、float
border border
hspace margin
vspace margin
<ol> type list-style-type
start
compact
<p> align text-align
<pre> width width
<s> text-decoration
<script> language
<strike> text-decoration
<table> align float、margin
bgcolor background-color
<td> width width
height height
bgcolor background-color
nowrap white-space
<th> width width
height height
bgcolor background-color
nowrap white-space
<tr> bgcolor background-color
<u> text-decoration
<ul> type list-style-type
compact

【b要素、big要素、i要素、small要素、tt要素】【tr要素、th要素、td要素に対するalign属性】は非推奨ではありません。

DOCTYPE宣言の構造と表示の切り替えについて

doctypeの構造をご紹介します。

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

  • HTML・・・・文書型名
  • PUBLIC・・・・外部識別子
  • -//W3C//DTD HTML 4.01//EN・・・公開識別子
  • http://www.w3.org/TR/html4/strict.dtd・・・・システム識別子

構造はこのようになってます。

システム識別子(DTDのURLの部分)は、省略する事ができます。

システム識別子(DTDのURLの部分)は、省略することはおそらくできません。 「省略して良い」という記述はW3Cの HTML 4.01 仕様書にはありません。 ちなみに省略すると「互換モード」「標準準拠モード」が切り替わります。

下が表示モードの切り替え表です。(XHTMLでは省略できないので注意)

DTD システム識別子 IE Firefox Opera
Strict 有り 標準モード 標準モード 標準モード
無し 標準モード 標準モード 標準モード
Transitional 有り 標準モード 標準モード 標準モード
無し 互換モード 互換モード 互換モード

表示モードの見え方の違い

見え方の違い

「互換モード」「標準準拠モード」の表示の違いのまとめです。

最初にいったように、この2つのモードではcssの解釈が変わります。 では、どこのデザインが変わるのか紹介していきますね。

boder・padding

標準モードの場合「width」「height」で指定したサイズの「外側」paddingborderが作られます。

互換モードの場合「width」「height」で指定したサイズの「内側」paddingborderが作られます。

例えば、標準モードで下のように設定するとします。

#contents{width:100px;}    <!--幅が100px-->
#contents{padding:0 10px;} <!--両サイドを10px開けるという意味-->

上のように設定した場合、標準モードでは両サイドの「外側」に10px追加されるので 全体の幅が120pxになります。 逆に互換モードの場合は「内側」にpaddingが作られるため、幅は80pxとなります。

センタリングの違い

標準モードでブロックレベル要素の左右に「margin:auto;」を指定するとセンタリングされます。 逆に互換モードではセンタリングされない。

互換モードでセンタリングさせたい場合は下記のように書きます。

#contents{text-align:center;}

フォントサイズの違い

標準モードでは「medium」が標準の文字サイズと同じ大きさとなります。

互換モードの場合は「small」が標準の文字サイズと同じになります。

結局DOCTYPEは宣言した方がいいの?

DOCTYPEは宣言しなくても各ブラウザに表示されるので問題はありません。 ただ、自分が使っているブラウザで上手く表示されてても他のブラウザではどうかわかりません。

先の事を考えるとDOCTYPE宣言は書いておいた方がいいです。 それに環境に左右されず自分の思い通りに表示させるためにも、DOCTYPE宣言は必要です。

w3cの規格に沿ってhtmlドキュメントを作成し、サイトの内容を正しく伝えるためにもDOCTYPE宣言を書いときましょう!

以上、「HTML5と4.01のDOCTYPE宣言の正しい使い方とまとめ」でしたー(^^)/ 長々とマニアックな話に付き合って頂きありがとうございます