【html5入門】DOCTYPE htmlとはなんぞや?

2019年1月13日

DOCTYPE html
html5を使用するには<!DOCTYPE html>という記述が必要です。

私もそうでしたが、html5を勉強し始めたばかりだとおまじない的に書いてはいるけど何で書くのかよくわかっていないことがありますよね。

そこで、この記事では

・DOCTYPE htmlとは
・DOCTYPE htmlはどこに書くの?
・DOCTYPE htmlは省略できるの?
・DOCTYPE htmlは大文字か小文字か?


といった内容をわかりやすく解説していきます。

DOCTYPE htmlとは

DOCTYPE htmlとは文書がhtml5で書かれたことをブラウザに伝えるための宣言のことです。

この宣言のことをDOCTYPE宣言と呼ぶので覚えておいてください。

htmlは様々なバージョンがあり、バージョンにより書き方が異なります。

仮にDOCTYPE htmlを書き込まなかった場合、互換モードという標準モードとは違うモードにブラウザが切り替わります。

互換モードになった場合、CSSの解釈の仕方が標準モードとは異なるので自分が意図したレイアウトとは違うものになるでしょう。

ですので、html5においてDOCTYPE宣言は重要なものなのです。

DOCTYPE htmlはどこに書くの?

DOCTYPE htmlを書き込む位置は、htmlで書かれたソースコードの一番上です。

下記のように書き込むことで宣言できます。

<!DOCTYPE html>

html5の他の要素も付け足した場合はこのような見栄えになります。

<!DOCTYPE html>
<html lang="en">
<head>
  
</head>
<body>
  
</body>
</html>

DOCTYPE htmlは省略できるの?

DOCTYPE htmlを省略できるかですが、結論から言えば省略することは可能す。

しかし先ほども書いたようにDOCTYPE htmlを省略した場合はレイアウトが意図したようにならないことがあるので、省略しない方が良いでしょう。

DOCTYPE htmlは大文字か小文字か

DOCTYPE htmlに関する疑問としてよくあるのが、DOCTYPE htmlの『DOCTYPE 』の部分は大文字と小文字どちらが正しいのかというものです。

<!DOCTYPE html>

<!doctype html>

はどちらが正しいのかという疑問ですね。

どちらにするのか迷った場合は、大文字と小文字どちらにしても問題ありません

というのもDOCTYPE宣言では大文字と小文字を区別しないからです。

迷った場合は好みの方を選びましょう。

まとめ

・DOCTYPE htmlとは文書がhtml5で書かれたことをブラウザに伝えるための宣言のこと

・DOCTYPE htmlを書き込む位置は、htmlで書かれたソースコードの一番上

・DOCTYPE htmlを省略することは可能だが、しない方が良い

・DOCTYPE htmlは大文字でも小文字でもどちらでも良い