LoginSignup
34
28

More than 5 years have passed since last update.

そもそもDOCTYPE宣言ってなんだ

Last updated at Posted at 2017-05-15

DOCTYPE宣言ってなんだ?

HTMLやXHTMLの文書の一番初めに書かれているDOCTYPE宣言。
<head>や<html>の前に書かれているには理由があります。
ブラウザは、まず第一にその文書がどんな言語で書かれているのかを把握する必要があります。
今からこの仕様で書き始めるよ!と先に宣言する必要があるわけですね。

DOCTYPE宣言とは

DOCTYPE宣言とは、
1. この文書がHTMLだよ!
2. このHTMLのバージョンだよ!
3. このDTD(Document Type Definition/文章の構成要素バージョン)に従った記述をするよ!

ブラウザはこの宣言の内容に従って、文書を表示します。
大文字で書いても小文字で書いてもOKです。

バージョンあれこれ

HTML4.01

HTML4.01には、3種類の文書型宣言があります。

HTML4.01 Strict DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
厳密なDTDです。非推奨の要素・属性が使えません。

HTML4.01 Transitional DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Strictほど厳密ではないDTDです。
非推奨の要素・属性の仕様が可能ですが、フレームは使えません。

HTML4.01 Frameset DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Transitionalにフレームが使えるようになったものです。
個人サイトとかでよく見たアレですね。

XHTML1.0

HTML4.0と同じようにXHTML1.0にも3種類の文書型宣言があります。

XHTML1.0 Strict DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
厳密なDTDです。非推奨の要素・属性が使えません。

XHTML1.0 Transitional DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
非推奨の要素・属性の仕様が可能ですが、フレームは使えません。

XHTML1.0 Frameset DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Transitionalにフレームが使えるようになったものです。

HTML5(2014年10月29日)

<!DOCTYPE html>
たったのこれだけ。
HTML5のあっさり感に未だに慣れないですね。

どうでもいい話ですが

HTMLとXHTMLの違いも知らなかった時代に作った自分のサイトのDOCTYPEがhtmlファイルのはずなのにXHTMLの指定になっていました……
確かDreamWeaverのドキュメント作成でXHTMLという文字列がカッコよくてみたいな感覚で選んだような……
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

34
28
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
34
28