<!DOCTYPE html>宣言の役割

<!DOCTYPE html>宣言は、
ブラウザがクイークスモード（Quirks Mode）ではなく標準モード（Standards Mode）でレンダリングするようにするために使用されます。

この宣言の唯一の目的は、ブラウザが最新のウェブ標準仕様に準拠し、正しくレンダリングするようにすることです。

HTMLで<!DOCTYPE html>は必須の専門（preamble）です。
<!DOCTYPE html>は過去（legacy）の理由で必要です。省略すると、ブラウザは一部の仕様と互換性のない別のレンダリングモードを使用することが一般的です。HTML文書の最上部に<!DOCTYPE html>を含めることで、ブラウザが関連仕様を最善の努力で遵守しようとすることが保証されます。

HTML 文書で<!DOCTYPE html>を宣言した例 
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>文書タイトル</title>
    </head>
    <body>
        <!-- ウェブページの内容 -->
    </body>
</html>

ブラウザは現代的で最新のウェブ標準仕様をサポートしていますが、過去に使われていた複数の仕様の旧バージョンのレンダリング方式も併せてサポートしています。
現代的で最新のウェブ標準仕様は、過去に使われていた方式とは異なる動作原理が多くあります。ウェブは非常に発展しており、現在も進化しています。過去のバージョンは現代のウェブ標準と互換性がない場合があります。

<!DOCTYPE html>宣言を含めると、ブラウザは関連するスペック（specifications）を最善の努力で遵守しようと試みます（makes a best-effort attempt）。これを一般的に標準モード（Standards Mode）と呼びます。

クイークスモード（Quirks Mode）は、旧型ブラウザで見られた非標準の動作を模倣するレガシーレンダリングモードです。
このモードは、現代の標準が広く採用される前に作成されたウェブページとの互換性を維持するために設計されました。クイークスモードでは、ブラウザがCSSボックスモデルやHTMLレイアウトを異なる解釈をすることがあり、しばしば一貫性のないページ表示が発生します。

一方、標準モードは最新のウェブ標準を強制し、現代のブラウザ全般で一貫性があり予測可能なレンダリングを保証します。

<!DOCTYPE html>宣言を省略すると、ブラウザはクイークスモード（Quirks Mode）でレンダリングする傾向があります。これは旧仕様（specifications）との互換性を維持するためです。しかし、このモードは一部の仕様と互換性がない場合があり、深刻な問題を引き起こす可能性があります。

<!DOCTYPE html>宣言は、ブラウザが最新バージョンのウェブ標準仕様を遵守し、正しくレンダリングすることを宣言する役割を果たします。この宣言を文書の最上部に含めると、ブラウザは該当する文書を最新のウェブ標準に合わせて処理しようと努めます。

<!DOCTYPE html>宣言に関する誤った偏見

HTMLのバージョンをブラウザに知らせる役割を果たす？

これは誤った偏見から生じた誤解です。
<<!DOCTYPE html>宣言はブラウザに対して最新バージョンのウェブ標準仕様を遵守し、正しくレンダリングするよう宣言する役割を果たしますが、バージョン情報を提供するものではありません。おそらく最新のHTMLバージョンであるHTML5を使用しているために生じた誤解だと考えられます。<!DOCTYPE html>宣言はHTMLだけでなく、CSSにも影響を与えます。

<!DOCTYPE html>はHTMLタグなのでしょうか？

<!DOCTYPE html>はHTMLタグではありません。
宣言文です。HTMLが始まる前に宣言する宣言文です。仕様書では大文字・小文字を区別しないと記載されています。

<!DOCTYPE html>を宣言すると、過去に使われていた複数の仕様の旧バージョンと互換性がある？

いいえ、過去に使われていた複数の仕様の旧バージョンとは互換性がありません。
望む過去のバージョンとの互換性を維持するには、該当するDOCTYPE宣言を使用する必要があります。

参考までに、以下は以前のHTMLバージョンで使われていた一般的なDOCTYPE宣言です。

HTML 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

これらの長大な宣言とは異なり、HTML5はDOCTYPEを<!DOCTYPE html>に簡素化し、開発者の体験とブラウザの互換性を大幅に向上させました。

<!DOCTYPE html>宣言のルール

<!DOCTYPE html>宣言は次の順序と構成要素を必ず守る必要があります。

  1. HTML文書の最上部に位置しなければなりません。
  2. <!DOCTYPE html>の文字列で構成されており、大文字・小文字を区別せずに一致しなければなりません。

現代のブラウザはBlink、Gecko、WebKitといったレンダリングエンジンを使用しています。
これらのエンジンはDOCTYPE宣言を基準にHTML文書をどのように解析しレンダリングするかを決定します。DOCTYPE宣言がある場合、エンジンは標準モードでの解析を行い、最新のCSSおよびHTML規則を適用します。反対に、DOCTYPEがない場合はクワークモードでの解析が有効となり、レガシーな動作が発生し、レンダリングの不一致が生じる可能性があります。

仕様書

DOCTYPEに関する仕様書
仕様書
DOCTYPE HTML Standard
#the-doctype

参考資料

関連項目