2. 文件類型宣告（DOCTYPE）

By /

文件類型宣告（doctype）放在 HTML 文件的開頭。在現代 HTML 中，它會告訴瀏覽器以標準模式呈現網頁，而不是使用舊式相容行為。

建立新的 HTML 網頁時，請使用：

<!doctype html>

文件類型宣告不是 HTML 元素，也不需要結束標籤。

2.1 文件類型宣告的位置

將文件類型宣告放在 <html> 元素之前：

<!doctype html>
<html lang="zh-Hant-HK">
<head>
  <meta charset="utf-8">
  <title>文件類型宣告範例</title>
</head>
<body>
  <h1>你好，香港！</h1>
</body>
</html>

為了讓文件結構簡單明確，建議將它放在第一行。

不要將它放在 <head> 或 <body> 內。

2.2 為甚麼文件類型宣告很重要？

瀏覽器支援不同的呈現模式，以保持與舊網站的相容性。

模式用途
標準模式，也稱為無怪異模式（no-quirks mode）使用現代標準的呈現規則
怪異模式（quirks mode）重現部分舊式瀏覽器行為
有限怪異模式，也稱為近乎標準模式（limited-quirks／almost standards mode）大致使用標準行為，但保留少量舊式差異

當文件以 HTML 提供時，現代文件類型宣告會選擇標準模式。

如果沒有合適的文件類型宣告，瀏覽器可能會進入怪異模式。這會影響版面配置，包括部分尺寸的計算方式。

網頁即使沒有文件類型宣告，也可能看似正常，但這不代表它正在使用預期的呈現模式。

2.3 現代 HTML 文件類型宣告

建議使用的宣告十分簡短：

<!doctype html>

你也可能見到：

<!DOCTYPE html>

兩種寫法在 HTML 中都有效，因為相關宣告語法不區分 ASCII 字母的大小寫。

這項宣告：

  • 不會指定帶有編號的 HTML 版本。
  • 不會連結至外部定義檔案。
  • 不會啟用 JavaScript 或 CSS。
  • 不會保證文件其餘部分的標記有效。

它經常被稱為「HTML5 文件類型宣告」，但同時也是現代 HTML 使用的標準宣告。

2.4 文件類型宣告與內容語言不同

無論網頁使用甚麼語言，文件類型宣告都保持不變。

一般英文

<!doctype html>
<html lang="en">

香港英文

<!doctype html>
<html lang="en-HK">

香港繁體中文

<!doctype html>
<html lang="zh-Hant-HK">
設定用途
<!doctype html>選擇現代 HTML 的呈現行為
lang標示內容語言
<meta charset="utf-8">宣告字元編碼

這些設定不能互相取代。

應為 <html> 選擇一個主要語言，再按需要標示其他語言的段落。

2.5 歷史上的文件類型宣告

較舊的 HTML 文件經常包含較長的宣告。

HTML 4.01 Strict

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

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

這些宣告參照歷史上的文件類型定義（Document Type Definition，DTD）。

維護舊網站時，你可能會遇到它們，但不建議在新的 HTML 網頁中使用。

需要注意：

  • 舊式宣告可能因其具體寫法而選擇不同的呈現模式。
  • 瀏覽器一般不會為了呈現 HTML 網頁而下載所參照的 DTD。
  • 歷史公開識別碼中的 EN 不會設定網頁的內容語言。

建立新網頁時，應使用 <!doctype html>，而不是複製舊式宣告。

2.6 HTML 與 XHTML

XHTML 使用 XML 語法。當它以 XML 媒體類型，例如 application/xhtml+xml 提供時，瀏覽器會使用 XML 剖析器處理。

例如，舊式 XHTML 文件可能使用：

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

不過，外觀像 XHTML 的文件類型宣告，不會令文件自動改用 XML 剖析。

回應的媒體類型，才是決定瀏覽器將文件當作 HTML 還是 XML 處理的關鍵。

以 text/html 提供的文件，即使標記看似 XHTML，仍會按 HTML 規則剖析。

本課程的一般網頁應使用：

  • <!doctype html>。
  • HTML 語法。
  • 部署時使用 text/html 媒體類型。

2.7 檢查呈現模式

你可以使用 JavaScript 檢查文件的相容模式：

console.log(document.compatMode);

常見結果如下：

結果意思
"CSS1Compat"標準模式或有限怪異模式
"BackCompat"怪異模式

document.compatMode 無法區分標準模式和有限怪異模式。

對使用 <!doctype html> 的現代 HTML 文件而言，預期結果是 "CSS1Compat"。

這項檢查只確認相容模式類別，不會驗證文件標記是否有效。

2.8 完整範例：標準模式網頁

以下網頁使用現代文件類型宣告，並顯示文件的相容模式。

中文版範例以 lang="zh-Hant-HK" 設定主要語言。即使 JavaScript 無法使用，網頁仍然可以閱讀。

id: hong-kong-html-doctypes
name: 文件類型宣告 — 標準模式範例
type: html
content: |-
  <!doctype html>
  <html lang="zh-Hant-HK">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>文件類型宣告 | HTML 基礎</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        color: #222;
        background: #f5f7fa;
        font-family: system-ui, sans-serif;
        line-height: 1.8;
      }

      main {
        max-width: 44rem;
        margin-inline: auto;
        padding: 2rem 1rem;
      }

      h1,
      h2 {
        color: #005ea8;
        line-height: 1.4;
      }

      section {
        margin-block: 1.5rem;
        padding: 1.25rem;
        border: 1px solid #767676;
        border-radius: 0.5rem;
        background: white;
      }

      section > h2 {
        margin-block-start: 0;
      }

      code {
        font-family: ui-monospace, monospace;
        overflow-wrap: anywhere;
      }

      .note {
        padding: 1rem;
        border-inline-start: 4px solid #005ea8;
        background: #eaf2f8;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>認識文件類型宣告</h1>
      <p>
        這份文件以現代 HTML 宣告開始：
        <code><!doctype html></code>。
      </p>

      <section>
        <h2>它有甚麼作用？</h2>
        <p>
          當文件以 HTML 提供時，
          這項宣告會選擇標準模式呈現。
        </p>
        <p>
          它不會設定內容語言或字元編碼。
        </p>
      </section>

      <section>
        <h2>相容模式檢查</h2>
        <p id="mode-result">
          JavaScript 尚未回報相容模式。
          你也可以在瀏覽器的主控台中檢查。
        </p>
        <p>
          <code>CSS1Compat</code> 代表標準模式或有限怪異模式。
          <code>BackCompat</code> 代表怪異模式。
        </p>
      </section>

      <p class="note">
        文件類型宣告、內容語言及字元編碼是不同設定，
        應分別正確指定。
      </p>
    </main>

    <script>
      const result = document.getElementById("mode-result");

      if (result) {
        result.textContent =
          `這份文件回報的相容模式是：${document.compatMode}。`;
      }
    </script>
  </body>
  </html>

在這個範例中：

  • 文件類型宣告放在 <html> 之前。
  • lang="zh-Hant-HK" 標示主要內容語言。
  • UTF-8 字元編碼另行宣告。
  • JavaScript 只回報相容模式，不會改變它。
  • 顯示在網頁上的宣告使用字元參照，避免被當作標記處理。

2.9 常見錯誤

錯誤較好的做法
遺漏文件類型宣告以 <!doctype html> 開始
將宣告放在 <head> 內放在 <html> 之前
為宣告加上結束標籤文件類型宣告沒有結束標籤
寫成 <!doctype html5>使用 <!doctype html>
將舊式宣告複製到新網頁使用現代宣告
以為宣告會設定語言另行設定 lang
以為 XHTML 宣告會強制使用 XML 剖析檢查文件的媒體類型
將 "CSS1Compat" 視為 HTML 有效的證明另行驗證標記

本章總結： 現代 HTML 文件應以 <!doctype html> 開始。它會選擇標準模式呈現，而內容語言、字元編碼、剖析方式及標記有效性，仍是需要分別處理的事項。

相關文章

Scroll to Top