HTMLファイルの始まりのタグ
HTMLファイルを作成する際、必ずファイルの先頭に記述する必要があるタグがあります。それは<!DOCTYPE html>です。この記事では、このタグの役割や記述方法、そしてなぜ重要なのかを詳しく解説していきます。
<!DOCTYPE html>タグの役割
<!DOCTYPE html>タグは、「ドキュメントタイプ宣言」と呼ばれ、そのHTMLファイルがHTMLのどのバージョンで書かれているのかをブラウザに伝える役割を担います。HTMLは長い歴史の中でバージョンアップを繰り返しており、バージョンによって利用できるタグやその挙動が異なります。そのため、ブラウザはHTMLファイルを表示する前に、どのバージョンのルールに従って解釈すれば良いのかを知る必要があります。<!DOCTYPE html>タグはこの指示を明確に行い、ブラウザがHTMLファイルを正しく表示することを助けます。
記述方法
<!DOCTYPE html>タグは、HTMLファイルの最初の行に記述します。記述する際には、タグの前にスペースや空行を入れないように注意してください。
<!DOCTYPE html>
<html>
<head>
<title>ページタイトル</title>
</head>
<body>
<p>ページの内容</p>
</body>
</html>HTMLバージョンとDOCTYPE宣言
HTMLのバージョンによって、DOCTYPE宣言の記述は異なります。以下は、主要なHTMLバージョンと対応するDOCTYPE宣言の表です。
| HTMLバージョン | DOCTYPE宣言 |
|---|---|
| HTML 5 | <!DOCTYPE html> |
| HTML 4.01 Transitional | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| HTML 4.01 Strict | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
現在、一般的に利用されているHTMLのバージョンはHTML5であるため、<!DOCTYPE html>を記述することが推奨されます。
<!DOCTYPE html>タグの重要性
<!DOCTYPE html>タグを省略したり、誤って記述したりすると、ブラウザがHTMLファイルを正しく解釈できず、表示が崩れたり、JavaScriptが正常に動作しなかったりする可能性があります。これは「 quirks mode（互換モード）」と呼ばれる、古いブラウザとの互換性を保つためのモードでレンダリングされるためです。 quirks modeでは、HTMLやCSSの標準規格とは異なる挙動を示すため、予期せぬ表示結果となることがあります。
<!DOCTYPE html>タグを正しく記述することで、ブラウザは「 standards mode（標準モード）」でHTMLファイルを解釈し、最新のHTMLやCSSの標準規格に従って表示を行います。 これにより、意図したとおりにウェブサイトを表示することができます。
まとめ
<!DOCTYPE html>タグは、HTMLファイルを作成する上で必ず記述する必要がある重要なタグです。 このタグを記述することで、ブラウザがHTMLファイルを正しく解釈し、意図したとおりに表示することができます。 HTMLファイルを作成する際には、忘れずに記述しましょう。
関連QA
Q1: <!DOCTYPE html>タグを記述しないとどうなりますか？
A1: ブラウザがHTMLファイルを正しく解釈できず、表示が崩れたり、JavaScriptが正常に動作しなかったりする可能性があります。これは「 quirks mode（互換モード）」と呼ばれる、古いブラウザとの互換性を保つためのモードでレンダリングされるためです。
Q2: HTML5以外のバージョンでウェブサイトを作成する場合はどうすれば良いですか？
A2: HTMLのバージョンに合わせてDOCTYPE宣言を記述する必要があります。ただし、現在、一般的に利用されているHTMLのバージョンはHTML5であるため、<!DOCTYPE html>を記述することが推奨されます。
Q3: DOCTYPE宣言はHTMLファイルのどこに記述すれば良いですか？
A3: HTMLファイルの最初の行に記述します。記述する際には、タグの前にスペースや空行を入れないように注意してください。