<!DOCTYPE> ドキュメントタイプの宣言
取り扱い | 現行の標準 |
カテゴリ |
なし |
親にできる要素 | ― |
子にできる要素 | ― |
対応ブラウザ | caniuseで確認 |
<!DOCTYPE>の説明
<!DOCTYPE>
は、作成したドキュメントがHTMLのどのバージョンで記述されているかを宣言するために使用します。基本的にはソースコードの先頭、つまり一行目に書きます。
HTML5以降のスタンダードな環境では、<!DOCTYPE html>
というシンプルな形で記述すれば良いとされています。
HTMLは、主に「ウェブブラウザ」というソフトウェアが解釈する言語です。そのため、<!DOCTYPE>
は自身のドキュメントタイプをソフトウェア側に伝える役目を担っています。
<!DOCTYPE>
で仕様を宣言するということは、そのルールに準拠したコーディングが求められます。冒頭で宣言したドキュメントタイプと、実際に書かれているHTMLのバージョンや形式が異なった場合、ブラウザのレンダリングでエラーが出たり表示が崩れることがあります。
初めたばかりの頃は、<!DOCTYPE>
がどのような効果を持つのか理解しずらいかも知れません。<!DOCTYPE>
を記述しなくても、ある程度ブラウザは勝手に解釈してくれます。慣れないうちは、他のサイトを真似てコピーしたものを貼り付けておくだけで問題ありません。
<!DOCTYPE>の特徴
- HTMLドキュメントの一行目に記述します。
- ブラウザーが文書をレンダリングするときのモードに影響を与えます。
- 厳密に言うと
<!DOCTYPE>
はHTMLの要素ではありません。
<!DOCTYPE>に指定できる主な属性
- なし
- 特にありません。
<!DOCTYPE>の使い方とサンプル
DOCTYPEの宣言は以下のように行います。参考までに、古いバージョンの内容も残しておきます。
- HTML5以降
- DOCTYPE宣言は、ブラウザのレンダリングモードとHTMLのマークアップを一致させるために行います。通常の環境では「標準モード(Standards mode)」を選択します。DOCTYPE宣言を記述しなかった場合、DOCTYPEスイッチを備えているブラウザでは、レンダリングに「互換モード(Quirks mode)」が適用されます。
HTML5
<!DOCTYPE html>
<html>
<head>
<title>ドキュメントタイトル</title>
</head>
<body>
ドキュメントの内容。
</body>
</html>
- Strict DTD (HTML4.01)
- HTML4の仕様に正確にしたがって書かれた文章用の宣言です。最も厳密であり、非推奨の属性やフレームを使う事はできません。
HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>ドキュメントタイトル</title>
</head>
<body>
ドキュメントの内容。
</body>
</html>
- Transitional DTD (HTML4.01)
- こちらは比較的制限が緩和されたもので、HTML4で非推奨となった要素や属性をある程度許容します。しかしフレームは使用出来ません。
HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ドキュメントタイトル</title>
</head>
<body>
ドキュメントの内容。
</body>
</html>
- Frameset DTD (HTML4.01)
- こちらはフレームを使用する場合の宣言です。
HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "https://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>ドキュメントタイトル</title>
</head>
<body>
ドキュメントの内容。
</body>
</html>
<doctype>に関連するHTMLタグ
ドキュメントの基礎を作る要素 | |
---|---|
<!DOCTYPE> | ドキュメントタイプの宣言 |
<html> | HTML文書の開始を宣言してドキュメントルートを定義する |
<head> | ドキュメントのヘッダーを定義する |
<body> | 画面に表示させるページ内容を定義する |