<!DOCTYPE html> - DOCTYPE 宣言 | HTML5

!DOCTYPE html 要素のポイント！

HTML5で記述されたページであることの明示
HTMLドキュメントにおいて必須の記述であり、1行目に記述する。
これからWEBサイトを作る場合にはHTML5での作成が基本となるため、DOCTYPE宣言は<!DOCTYPE html>を使えば問題ない。
仕様や挙動を難しく考えず、お約束事としてコピペな感じで使えばよいでしょう。

`!DOCTYPE html`要素の概要

SUMMARY OF ELEMENT

<!DOCTYPE html>は、HTML5でWEBページを作成する際に、必ず1行目に記述し、この文書がHTML5で記述されていると言うことを明示するものです。これをDOCTYPE宣言（ドキュメントタイプ宣言）と言います。

HTMLで作成するWEBページには、DOCTYPE宣言は必須となるわけですが、これは標準に準拠した形でレンダリング（ページの表示）を行うための規定です。

主要なブラウザにはページの描画において「標準モード(Standard Mode)」「準標準モード(Almost Standard Mode)」「互換モード(Quirks Mode)」と3つの描画モードが搭載されています。
そしてブラウザの種類やバージョンによって、CSSの解釈がまちまちで、現在の標準の仕様とは異なる描画を行うものもあります。

標準モードはその名の通り、html、CSSの記述をWEB標準の仕様通りに描画するモードです。

反対に、互換モードというのは前述したような古いバージョンのブラウザでもデザインやレイアウトが崩れないように、現在の標準仕様とは異なる解釈で描画し互換対応させるモードです。
※準標準モードはその中間的なものとお考えください。

この互換モードはCSSの解釈が現在の標準仕様とは異なる場合が多々あり、自分の意図するデザイン、レイアウトと異なってしまうことになります。

そういった背景からHTML5でのページ作成の際には<!DOCTYPE html>を記述し標準モードで描画されるようにするのです。

MEMO

HTML5以前のHTML4.01や、XHTML1.0などでは、DOCTYPE宣言にDTD（文書型定義）を指定する必要がありました。

HTML4.01(Strict)のDOCTYPE宣言
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML1.0(Transitional)のDOCTYPE宣言
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

現在のHTML5ではこのDTDの記述は必要なくなり、シンプルなDOCTYPEの記述となっています。

`!DOCTYPE html`要素の利用例

USAGE EXAMPLE FOR ELEMENT

要素の利用例を実際のコードを見ながら覚えていきましょう。
簡単なCSSでデザインをしているものもありますが、CSSの詳細はCSSリファレンスをご覧ください。

`!DOCTYPE html`の基本的な利用例

ここでは、<!DOCTYPE html>の具体的な記述例を見ていきましょう。
ドキュメントの1行目でDOCTYPE宣言を記述し、その直後にhtml要素を記述します。


<!DOCTYPE html>
<html lang="ja">
  <head>
    ページメタ情報等
  </head>
  <body>
    サイト表示内容
    ・・・・・・・
  </body>
</html>

`!DOCTYPE html`要素の定義

DEFINITIONS OF ELEMENT

コンテンツ・カテゴリ

なし

要素を記述出来る場所

-

内包できるコンテンツ

-

開始/終了タグの省略

-

ボックスのタイプ

-

付与できる属性

-

!DOCTYPE html 要素のポイント！

!DOCTYPE htmlの基本的な利用例

`!DOCTYPE html`の基本的な利用例