目的

HTMLの骨組みについて、その役割や意味・背景などの基礎知識を理解すること。

基本構造

※VSCode（コードエディタ）であれば、!キー＋Enterキー押下で下記の最低限の骨組みが
　補完されます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

１行目の<!DOCTYPE html>から順に確認してきます。

１行目：DOCTYPE宣言

DOCTYPEとは

HTML文書の先頭に記述する文書型宣言のことです。
これを記述することで、ブラウザに対し、このHTMLファイルが古いHTML文書でないことを
示します。小文字で記載しても問題なく動作します。

古いHTML文書とは

古いHTML（バージョン4.01以前）はSGML（HTMLの元にである言語）が利用されており、
以下のように文書の先頭でDTD（文書のルール）を参照する記述が必要でした。

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

HTML5以降はSGMLを利用していないため、上記宣言は不要となりました。
しかし、ブラウザは互換性モードかどうかをこの宣言内容により判定しています。
文書型宣言の記述がないと互換性モードと解釈されますが、これを避けるために
DOCTYPE宣言が必要となりました。

ブラウザの解釈モード（レンダリングモード）について

以下の３種類があります。
現在ほとんどのブラウザが③完全標準準拠モードの利用を推奨しています。
① 後方互換 (Quirks) モード
　古いHTMLを正しく表示するモード。現在の標準的なHTML・CSSルールを無視して、
　古いブラウザの挙動を再現する。
② 準標準 (Almost Standards) モード
　基本的には標準ルールで表示するが、古いブラウザとの互換性のため
　一部例外があるモード。
③ 完全標準準拠 (Full Standards) モード ◀推奨
　最新の標準的なHTML・CSSの仕様通りに解釈・動作するモード。

※ブラウザの表示方法（レンダリングモード）では、以下のような内容が
　切り替えられます。
　・レイアウトの計算方法（ボックスモデル・table・imgのサイズの計算方法）
　・適用するCSSルール（最新仕様または古いブラウザ向けのルールか）
　・ブラウザ互換性の確保（古いWebページ表示のために昔のブラウザの挙動を再現）

参考