DOCTYPEとは
htmlファイルの先頭に必ず記述する「DOCTYPE」の宣言は、そのhtml文書で使用するHTMLやXHTMLのバージョンを宣言する為に使用します。
何となくコピペして使用していると、思わぬところで意図しないレイアウトになったりするので、「DOCTYPE」宣言の役割をしっかり把握しておきましょう。
DOCTYPEを宣言すると？
DOCTYPEを宣言することは、その文書がHTMLであることや、どのバージョンで作成されているかを宣言するものです。DOCTYPEは文章型宣言とも呼ばれ、DTD（Document Type Definition）をHTMLファイルの冒頭で指定します。
HTML5でのDOCTYPE宣言
HTML5でのDOCTYPE宣言は、以前のHTML4の書き方に比べ、かなりシンプルな記述が可能になりました。以下がHTMLのDOCTYPE宣言です。
<!DOCTYPE html>DOCTYPEは省略することも可能ですが、省略した場合、多くのブラウザでは、互換モードで表示されます。その場合、レイアウト崩れなどが発生するため、必ずファイルの先頭に記述するようにしましょう。
互換モードとは？
ほとんどのブラウザには、「標準モード」と「互換モード」の2つの表示モードがあります。HTMLやCSSの標準仕様に準拠して表示するモードが「標準モード」で、古いバージョンで作成されたHTMLを、過去のブラウザと同じように表示するモードを「互換モード」と呼びます。
「標準モード」と「互換モード」の切り替えは、先述したHTMLのDOCTYPE宣言によって切り替えの判定が行われます。
HTML5のHTMLテンプレート
では、HTML5のDOCTYPE宣言を使ってHTMLファイルを作成してみましょう。次のサンプルコードは、HTML5で最低限必要なHTMLタグをまとめたものです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="サイトの概要">
<meta name="author" content="作成者">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サイトのタイトル</title>
</head>
<body>
<p>サイトの本文</p>
</body>
</html>HTML4でのDOCTYPE宣言
次に、HTML4でのDOCTYPE宣言について見ていきましょう。HTML4には、次の3種類のDOCTYPE宣言方法があります。
HTML4.01 Strict DTD（厳密型DTD）
W3C（Web技術の標準化を行う団体）が非推奨とする要素や属性は使用できず、要素の配置にも細かいルールがあります。また、フレームも使えません。
HTML4.01 Transitional DTD（移行型DTDと）
W3Cが非推奨とする要素や属性は使えますが、フレームは使えません。
HTML4.01 Frameset DTD（フレーム設定型DTD）
Transitional DTDと同じようにW3Cが非推奨とする要素や属性が使用でき、フレームも使えます。最近ではフレームを使ったサイトは見かけなくなった為、あまり使わないDTDです。
HTML4のHTMLテンプレート
HTML4のDOCTYPE宣言を使ったHTMLの最小構成のテンプレートを紹介します。
・HTML4.01 Strict DTD（厳密型DTD）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="サイトの概要">
<meta name="author" content="作成者">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>サイトのタイトル</title>
</head>
<body>
</body>
</html>・HTML4.01 Transitional DTD（移行型DTDと）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
~ 以降、厳密型DTDと同じため、省略 ~・ HTML4.01 Frameset DTD（フレーム設定型DTD）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
~ 以降、厳密型DTDと同じため、省略 ~XHTMLでのDOCTYPE宣言
XHTMLは、HTML4.01をベースに作られたHTMLであり、HTMLと特徴は似ています。HTMLでは記述の内容がある程度自由だったのに対し、XHTMLは、XML文書のルールに従って書く必要があり、書式が厳密に決まっています。
例えば、改行を表す<br>タグでは、HTML4.01であれば閉じタグは必須ではありませんが、XHTMLでは、タグをしっかり閉じる必要があるため、<br/>のように書く必要があります。
XHTMLにも、DOCTYPE宣言が必要です。基本的には、先述したHTML4のDOCTYPE宣言と同じような書き方になります。
XHTML 1.0 Strict DTD（厳密型DTD）
非推奨とする要素や属性は使用不可、フレームも使用不可。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
・・・XHTML 1.0 Transitional DTD（移行型DTDと）
非推奨の要素や属性は使用可能、フレームは使用不可。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
・・・XHTML 1.0 Frameset DTD（フレーム設定型DTD）
非推奨の要素や属性、フレームが使用可能。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
・・・HTML5の利用を積極的に
htmlファイルの先頭に記述するDOCTYPE宣言について、HTMLのバージョン毎に書き方を解説してきました。DOCTYPEの指定方法によって、ブラウザの表示モードが変わる為、何気なくコピペするのではなく、htmlのタグ構造をよく確認してから指定しましょう。
ちなみに、2020年現在では、ほぼすべてブラウザがHTML5に対応しています。そのため、HTMLを新しく作成する場合は、特に理由がない限りHTML5で記述したほうが良いでしょう。
DTD（Document Type Definition）は、HTMLのバージョン毎に、使用できる要素や属性が定義されたファイルです。