DOCTYPE宣言・DOCTYPEスイッチ

SNSでシェアする

DOCTYPEの基本

DOCTYPEとは、「Document Type Definition（DTD）」のことで、日本語にすると「文書型の定義」を意味します。DOCTYPEスイッチは、HTMLやCSSを仕様通りに正しく解釈するブラウザと、そうでないブラウザが存在する中で、どのように解釈するかを状況によって切り替えるための仕様です。

HTMLの記述は、<!DOCTYPE>の型を用います。これをドキュメントの先頭に書くことによって、CSSに期待する処理の基準をDOCTYPEの仕様に基づいて宣言します。

HTMLだけを使ってウェブサイトを構築していた時代は、DTDを省略していた方も多いのですが、CSSを本格的に使うようになってから、DOCTYPE宣言は必須の要素となりました。一時期は複雑な記述を強いられていましたが、HTML5のメジャーアップデート以降は、冗長なコードを書かなくて良くなりました。

現在では、HTML Living Standard の標準に従っている限り、簡潔な宣言を一種類覚えるだけで事足ります。DOCTYPEの解説はもはや不要なものとなりつつありますが、かつて存在していた内容も履歴として残しておきます。

現在のDOCTYPE宣言（HTML5以降）

HTML Living Standardの標準仕様に準拠したDOCTYPE宣言は下記の通りに行います。この宣言は厳密に言うとHTML要素ではありません。SGMLやXMLの文書を、文書型定義（DTD）と結びつけるための宣言です。


<!DOCTYPE html>

DOCTYPEは、HTML5の仕様と同様に大文字と小文字を区別しません。そのため、以下の記述は全て同じです。いずれのパターンを使用しても問題ありませんが、大手企業のサイトやグローバル・サービスの記述を参考にすると良いでしょう。


<!doctype html>
<!Doctype Html>
<!DOCTYPE html>
<!DOCTYPE HTML>

DOCTYPE宣言は、必ずドキュメントの最初に行います。HTML文書であれば、以下の場所に書きます。


<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>HTMLドキュメントの雛形です。</title>
</head>
<body>
	<h1>HTMLドキュメントの雛形です。</h1>
	<p>最低限必要なHTMLの構造です。</p>
</body>
</html>

HTML4.01のDOCTYPE宣言

HTML4.01では、3種類のDTDが用意されています。 Internet Explorer 6.0の場合、Internet Explorer専用のタグやプロパティを使用してると、DOCTYPE宣言によって表示モードが異なるため表示しないものがあります。例えば、 scrollbarプロパティを指定しても反映しません。DOCTYPE宣言を使用する場合は、注意が必要です。

Strict DTD
仕様通りHTML4.01本来の厳密で正確な解釈をします。非推奨要素や属性、またフレームを使用することができません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
Transitional DTD
非推奨要素や属性は使用できますが、フレームを使用することができません。要素の配置については比較的制限が甘くなっています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
Frameset DTD
Transitional DTDとほぼ同じですが、フレームが使用できます。

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

XHTMLのDOCTYPE宣言

XHTMLの場合、<!DOCTYPE ...> の前にXMLのバージョンとエンコーディング方式を宣言することが推奨されます。


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ...>
<html ...>

これに加えて、「名前空間」というものを導入する事がW3Cから勧告されています。


<html xmlns="https://www.w3.org/1999/xhtml">

UIは、この宣言を最初に行うことで文書で用いられているタグがXHTMLのものであることを認識します。

XHTML 1.0 Strict DTD
XHTML1.0の書式に則って厳密な記述であることを宣言します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional DTD
非推奨要素の記述も許される比較的ゆるい記述であることを宣言します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset DTD
[Transitional]と同等の形式で、フレームを使用する場合に宣言します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1 Strict DTD
XHTML1.1の書式に則って厳密な記述であることを宣言します。XHTML 1.1はStrictに相当するものしか認められていません。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML Basic 1.0 DTD
携帯電話などのXHTML機能をフルで扱うことができない端末のための設計となっています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "https://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
XHTML Mobile Profile 1.0 DTD
XHTML MPは、XHTML Basic 1.0にXHTML Modulesを追加したものです。携帯電話などのXHTML機能をフルで扱うことができない端末のための設計となっています。

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "https://www.wapforum.org/DTD/xhtml-mobile10.dtd">

XHTMLでDOCTYPE宣言をする祭の記述例

ここまでの内容を踏まえて、XHTMLでDOCTYPE宣言をする祭の記述例を紹介します。以下の内容は、比較的寛容な基準でマークアップを始めたい場合の宣言です。


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
/* ヘッダーの内容 */
</head>

CSSリファレンス一覧

CSS学習ガイド

入基本的な解説から実用的な応用編まで

詳細 〉

CSSプロパティ一覧表

目的や頭文字からサンプルを検索

詳細 〉

特殊文字・特殊記号

HTMLで使える文字参照コード

カラーコード

HTMLやCSSで使える色指定