!DOCTYPE htmlとは?|DOCTYPEをHTMLの最初に記述する理由を解説

DOCTYPEをHTMLの最初に記述する理由とは?
リンゴ
博士、<!DOCTYPE html>ってどんなタグなんですか?
博士
リンゴくん、<!DOCTYPE html>は正確に言うとHTMLのタグではないんじゃ。
しかし、HTML文書を作成するとき、必ず最初に記述しなければいけない大切なものなんじゃよ。
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<!DOCTYPE html>とは

 

<!DOCTYPE html>

対応ブラウザInternet Explorer / Firefox / Google Chrome / Safari / Opera
分類
利用場所文書の先頭
内容


 
 
HTMLの最初に記述している<!DOCTYPE html>は、HTMLのバージョンとDTD(Document Type Definition:文書型宣言)と呼ばれる種類を示しています。

HTMLは、バージョンとDTDによって利用できるタグが異なるので、どのバージョンの規則に従って記述されているのかを示す必要があります。
 
 

博士
必ず文書の一番最初(html開始タグよりも前)に記述するというのがポイントじゃ。
 
 

XHTML 1.0とHTML 4.01には3種類のDTDがある

DTD(文書型宣言)は、そのバージョンのHTMLで使用することができる要素や属性、それらの配置に関するルールなどを厳密に定義しているものです。
XHTML 1.0とHTML 4.01には、以下3種類のDTDが用意されています。
 
 

Strict

非推奨の要素や属性は使用できません。また、フレームも使用することができません。

XHTML 1.0 Strict

HTML 4.01 Strict

 
 

Transitional

Strictで使用できるタグに加えて、非推奨の要素や属性も使用できます。フレームは使用できません。

XHTML 1.0 Transitional

HTML 4.01 Transitional

 
 

Frameset

Transitionalで使用できるタグに加えて、フレームを使用できるようにした宣言です。

XHTML 1.0 Frameset

HTML 4.01 Frameset

 
 
リンゴ
どれも長くてややこしいですね…
博士
そうじゃろう。
しかし、現在はこれよりもっと簡単な記述で大丈夫なんじゃ。
 
 

スポンサーリンク

現在はHTML5が主流

XHTML 1.0とHTML 4.01に存在する3種類のDTDについて解説しましたが、現在主流となっているのはHTML5です。

これまでのホームページでよく使われていたHTML 4.01 Transitionalでは、上記で解説したように長々とDOCTYPE宣言を書く必要がありましたが、HTML5のDOCTYPE宣言は非常にシンプルです。

 
 
これだけの記述でOKです。
上記のような記述があれば、ブラウザはHTML5で書かれた文書として解読を行います。

メモ
「DOCTYPE」は、大文字と小文字を区別しませんが、一般的には大文字で書くことが推奨されています。
 
 
これから制作するサイトはHTML5のDOCTYPE宣言を使用するといいでしょう。

リンゴ
これならシンプルでわかりやすい!
 
 

DOCTYPE宣言がないとどうなるの?

HTML5には上記で説明したDTDが存在しないため、DOCTYPE宣言はあまり意味を持たないとされています。
しかし、ブラウザの表示モード(レンダリングモード)を「標準モード」にするためにも記述しておいたほうが良いでしょう。

これはどういう事かと言うと、DOCTYPE宣言がない場合、一般的なブラウザでは表示モードが「互換モード」になります。

互換モードではブラウザがCSSを正しく読み込まない可能性があり、そうなるとレイアウトも崩れてしまいます。

博士
ブラウザが「旧式のページ」だと判断してしまうんじゃ。
 
 
互換モードで表示させないようにするためにも、必ずDOCTYPE宣言を記述するようにしましょう。

博士
標準モードで表示するためだけに記述すると言ってもいいぞ。
 
 

レンダリングモードとは

レンダリングモードとは、Webページの表示方法を決めるブラウザの状態のことで、DOCTYPE宣言の記述のしかたによってモードが切り替わります。
レンダリングモードには、以下の2種類があります。

標準モード

CSSなどの仕様通りに正しく表示するモード。

互換モード

CSSが普及していなかった過去の時代のブラウザとの互換のために、あえて標準仕様とは異なる解釈で表示するモード。

互換モードでページが表示される場合、ブラウザがCSSを正しく読み込まないことがあるため、レイアウトが崩れてしまうこともあります。
 
 

スポンサーリンク

使用例

 
 

まとめ

HTML文書を作成するときは、必ず最初にDOCTYPE宣言を書きましょう。
 
 

博士
書き方が分からなくなったら、またこのページに来てくれ。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








DOCTYPEをHTMLの最初に記述する理由とは?