HTML 格式化最佳實踐：撰寫整潔的程式碼

你打開一個檔案，映入眼簾的是一面由 HTML 構成的牆壁——沒有縮排、標籤擠在一起、div 巢狀結構綿延數百行。要找到一個遺漏的結束標籤簡直是天方夜譚。我們都曾經歷過這種痛苦，而良好的 HTML 格式化正是徹底消除這種問題的關鍵。

格式良好的 HTML 不僅僅是為了美觀。它直接影響你排除問題的速度、團隊協作的順暢度，以及程式碼庫長期的可維護性。無論你是在建構一個簡單的登陸頁面還是一個複雜的網頁應用程式，格式化習慣都會影響後續的一切。

為什麼良好的 HTML 格式化很重要

可讀性

程式碼被閱讀的次數遠多於被撰寫的次數。當你的 HTML 遵循一致的格式規則時，團隊中的任何人都能一目了然地掃描結構。巢狀元素變得顯而易見，遺漏的標籤一目瞭然，整體文件結構清晰明瞭。

可維護性

六個月後，你需要更新那個元件。整潔的格式意味著你可以直接開始修改——而不是花前二十分鐘來理解結構。

協作性

當團隊中的每個人都遵循相同的格式慣例時，程式碼審查就會成為關於邏輯和架構的有意義討論，而非關於空白的爭論。格式一致也會減少合併衝突。

除錯能力

縮排良好的 HTML 文件能即時呈現其層級結構。當渲染結果不正確時，你可以透過視覺追蹤巢狀關係來定位問題。壓縮過或格式不佳的標記會隱藏這些結構關係。

縮排風格與慣例

HTML 中的縮排之爭大致上與更廣泛的程式設計社群相同：空格還是 Tab，以及每一層使用幾個空格。

2 個空格

兩個空格的縮排是 HTML 中最流行的選擇，也是 Google 風格指南、Prettier 預設配置以及大多數現代前端框架所採用的方式。

<main>
  <section>
    <h1>Welcome</h1>
    <p>This is a paragraph.</p>
  </section>
</main>

其優勢在於程式碼精簡的同時仍能清楚展示層級結構。在 HTML 中深層巢狀是常見的情況，兩個空格能避免程式碼向右偏移太多。

4 個空格

四個空格的縮排在巢狀層級之間提供了更大的視覺間距，使層級結構更加鮮明。

<main>
    <section>
        <h1>Welcome</h1>
        <p>This is a paragraph.</p>
    </section>
</main>

一些團隊在巢狀較淺的 HTML 模板中偏好使用四個空格。然而，當複雜的佈局包含多層巢狀時，程式碼可能會被推到螢幕的遠端，造成不便。

Tab

Tab 讓每位開發者可以在自己的編輯器中設定偏好的視覺寬度。一個 Tab 可能對某位開發者顯示為 2 個空格，對另一位顯示為 4 個空格，而不會改變實際的檔案內容。

選定一種風格並保持一致

具體的選擇遠不如一致性重要。配置好你的編輯器，設置 Prettier 等格式化工具，並透過 pre-commit hook 來強制執行。關於縮排風格的討論應該只發生一次——在設定規則的時候——而不是在每次 Pull Request 時。

HTML5 語義化元素

語義化元素向瀏覽器和輔助技術傳達含義。它們將泛用的 div 和 span 替換為專門描述內容角色的標籤。

文件結構元素

<body>
  <header>
    <nav>
      <a href="/">Home</a>
      <a href="https://example.com/about">About</a>
    </nav>
  </header>

  <main>
    <article>
      <h1>Article Title</h1>
      <p>Article content goes here.</p>

      <section>
        <h2>Subsection</h2>
        <p>More detailed content.</p>
      </section>
    </article>

    <aside>
      <h2>Related Links</h2>
      <ul>
        <li><a href="https://example.com/related">Related Article</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 Example Inc.</p>
  </footer>
</body>

各元素的使用時機

<header> — 介紹性內容或導覽連結。不僅可用於頁面層級，也可出現在 <article> 或 <section> 內部。
<nav> — 主要導覽區塊。不要將每組連結都用 <nav> 包裹——僅用於主導覽。
<main> — 頁面的主要內容。每頁只能有一個，且不得巢狀在 <article>、<aside>、<header>、<footer> 或 <nav> 內部。
<article> — 獨立且自成一體的內容：部落格文章、新聞報導、論壇貼文、產品卡片。
<section> — 具有主題性的內容分組，通常附帶標題。當內容代表一個邏輯區段時，用它取代 div。
<aside> — 與周圍內容間接相關的內容：側邊欄、引言摘錄、相關連結。
<footer> — 最近區塊祖先的頁腳資訊。與 <header> 類似，它也可以出現在文章和段落中。

`div` 與語義化元素的差異

div 沒有任何語義含義。它只是一個用於樣式和佈局的泛用容器。當你準備使用 div 時，問問自己：是否有更適合描述這個內容的語義化元素？如果答案是肯定的，那就使用語義化元素。

<!-- Avoid this -->
<div class="navigation">
  <div class="nav-links">
    <a href="/">Home</a>
  </div>
</div>

<!-- Prefer this -->
<nav>
  <a href="/">Home</a>
</nav>

無障礙設計模式

無障礙 HTML 不是一個獨立的考量——它就是寫得好的 HTML。大多數無障礙改進同時也會讓你的標記更加乾淨且具意義。

標題層級

標題必須遵循邏輯順序。切勿因為樣式需求而跳過層級——請改用 CSS 來調整視覺大小。

<!-- Correct hierarchy -->
<h1>Page Title</h1>
  <h2>Major Section</h2>
    <h3>Subsection</h3>
    <h3>Another Subsection</h3>
  <h2>Another Major Section</h2>

<!-- Incorrect — skips h2 -->
<h1>Page Title</h1>
  <h3>This skips a level</h3>

圖片替代文字

每個 <img> 元素都需要 alt 屬性。描述性的替代文字能幫助螢幕閱讀器使用者理解內容。對於純裝飾性的圖片，使用空的 alt="" 來表示該圖片不傳達任何資訊。

<!-- Informative image -->
<img src="chart.png" alt="Bar chart showing revenue growth from Q1 to Q4 2025">

<!-- Decorative image -->
<img src="decorative-border.png" alt="">

表單標籤

每個表單輸入欄位都必須有對應的標籤。標籤上的 for 屬性應與輸入欄位的 id 對應。

<label for="email">Email Address</label>
<input type="email" id="email" name="email" required>

避免使用佔位符文字來替代標籤。佔位符在使用者開始輸入時就會消失，從而移除了欄位所預期內容的上下文提示。

ARIA 標籤

當原生 HTML 語義不足時，使用 ARIA 屬性。然而，ARIA 的首要原則是：如果有原生 HTML 元素已經具備你所需的語義，那就直接使用它。

<!-- ARIA for custom components -->
<button aria-label="Close dialog" aria-expanded="false">
  <svg><!-- icon --></svg>
</button>

<!-- Better: use native semantics when possible -->
<button type="button">Close</button>

鍵盤導覽

互動元素必須支援鍵盤操作。原生 HTML 元素如 <button>、<a> 和 <input> 預設就支援鍵盤操作。當使用 div 或 span 作為互動元素時（一般應盡量避免），需要添加 tabindex="0" 和鍵盤事件處理器。

屬性排序慣例

一致的屬性排序使 HTML 更容易掃描瀏覽。雖然沒有嚴格的標準，但一個被廣泛採用的慣例是按重要性和功能排列屬性：

<input
  type="email"
  id="user-email"
  name="email"
  class="form-input"
  placeholder="[email protected]"
  required
  aria-describedby="email-help"
  data-validate="email"
>

建議的排列順序：

type — 元素或輸入的類型
id — 唯一識別符
name — 表單提交名稱
class — 樣式掛鉤
src、href、for — 資源參考
value、placeholder — 內容屬性
required、disabled、checked — 布林狀態
aria-* — 無障礙屬性
data-* — 自訂資料屬性

這不是硬性規定，但在專案中保持一致非常重要。設定你的 Linter 來強制執行你所選擇的順序。

自閉合標籤、空元素與布林屬性

空元素

有些 HTML 元素不能包含內容，也不需要結束標籤。這些被稱為空元素：

<br>
<hr>
<img src="photo.jpg" alt="A sunset over the ocean">
<input type="text" name="search">
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">

在 HTML5 中，空元素不需要使用結尾斜線來自閉合（<br />）。斜線是可選的，純屬風格偏好。但如果你的專案使用 JSX 或 XHTML，自閉合語法是必須的。

布林屬性

布林屬性只有存在或不存在兩種狀態——不需要值。屬性存在代表 true，不存在代表 false。

<!-- These are equivalent -->
<input type="text" required>
<input type="text" required="required">
<input type="text" required="">

<!-- Preferred: just the attribute name -->
<input type="text" required>
<button disabled>Submit</button>
<video autoplay muted></video>

常見的 HTML 格式化錯誤

1. 不一致的縮排

混用 Tab 和空格，或每一層使用不同數量的空格，會造成視覺上的混亂。使用格式化工具來防止這個問題。

2. Div 巢狀濫用

在語義化元素能更好地傳達意義的情況下，卻將所有東西都包在 div 元素中。這會損害無障礙性、SEO 和程式碼可讀性。

<!-- Div soup -->
<div class="header">
  <div class="nav">
    <div class="nav-item"><a href="/">Home</a></div>
  </div>
</div>

<!-- Clean semantic markup -->
<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>

3. 缺少 Alt 屬性

省略圖片上的 alt 屬性是違反無障礙規範的行為，會在所有 HTML 驗證器中觸發警告。

4. 行內樣式

在 HTML 中到處添加 style 屬性會混淆關注點，使維護變得更加困難。請改用 CSS 類別。

5. 過深的巢狀結構

如果你的 HTML 達到了六、七層深的巢狀，請重新考慮你的佈局。過深的巢狀通常表明結構可以透過更好的元件架構來簡化。

6. 缺少文件語言

務必在 <html> 元素上包含 lang 屬性。螢幕閱讀器會使用它來選擇正確的發音規則。

<html lang="en">

7. 未使用 `<!DOCTYPE html>` 宣告

HTML 文件務必以 doctype 宣告開頭。沒有它，瀏覽器可能會以怪異模式渲染頁面，導致不一致的行為。

自動美化與程式碼檢查工具

手動格式化既容易出錯又繁瑣。自動化工具無需持續的人力投入即可確保一致性。

Prettier

Prettier 是網頁開發中最流行的程式碼格式化工具。它支援 HTML、CSS、JavaScript 及許多其他語言。只需配置一次，它就能自動處理縮排、屬性換行和行長度。

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "htmlWhitespaceSensitivity": "css"
}

將 Prettier 設為 pre-commit hook 或在編輯器中啟用儲存時格式化，格式化就會變得完全自動化。

HTMLHint

HTMLHint 是一個專門針對 HTML 的靜態分析工具。它能捕捉格式化工具無法發現的問題——例如缺少 alt 屬性、重複的 ID 和已棄用的元素。

{
  "tagname-lowercase": true,
  "attr-lowercase": true,
  "attr-value-double-quotes": true,
  "tag-pair": true,
  "id-unique": true,
  "alt-require": true
}

編輯器整合

大多數現代編輯器——VS Code、WebStorm、Sublime Text——都內建或透過外掛支援 HTML 格式化。啟用儲存時自動格式化，就能在不費心思的情況下保持 HTML 的整潔。

生產環境的壓縮

開發階段的 HTML 應該保持美觀的格式，但生產環境的 HTML 則受益於壓縮以減少檔案大小。我們的 Code Minifier 可以去除空白、移除註解，並為部署壓縮你的 HTML。關鍵在於保持原始碼的格式化，僅對輸出進行壓縮。

工具與資源

善用正確的工具能更容易維持良好的格式化習慣：

Code Minifier — 為生產環境壓縮 HTML、CSS 和 JavaScript，同時保持原始碼的整潔
Markdown Previewer — 預覽和格式化 Markdown 內容，該內容通常會生成 HTML 輸出

常見問題

HTML 縮排應該使用 2 個空格還是 4 個空格？

在現代網頁開發中，兩個空格是最常見的慣例，也是 Prettier 的預設值。四個空格適用於巢狀較淺的簡單文件。最重要的是選定一種並用格式化工具來強制執行。

語義化 HTML 和普通 HTML 有什麼區別？

語義化 HTML 使用描述內容含義的元素（<article>、<nav>、<header>），而非泛用容器（<div>、<span>）。語義化標記能改善無障礙性、SEO 和程式碼可讀性。

如果使用了語義化 HTML，還需要 ARIA 屬性嗎？

在大多數情況下，語義化 HTML 已經提供了足夠的無障礙資訊。ARIA 在你建構沒有原生 HTML 對應元素的自訂互動元件時才需要使用，例如自訂下拉選單或標籤面板。

如何在團隊中統一 HTML 格式？

使用帶有共享配置檔案的 Prettier，添加 HTMLHint 配置進行程式碼檢查，並利用 Husky 和 lint-staged 等工具將兩者設為 pre-commit hook。

對空元素使用自閉合語法（如 `<br />`）可以嗎？

在 HTML5 中，空元素的結尾斜線是可選的。<br> 和 <br /> 都是有效的。在 JSX（React）中，自閉合語法是必須的。遵循你的專案或框架所期望的慣例即可。

HTML 格式化最佳實踐：撰寫整潔的程式碼

為什麼良好的 HTML 格式化很重要

可讀性

可維護性

六個月後，你需要更新那個元件。整潔的格式意味著你可以直接開始修改——而不是花前二十分鐘來理解結構。

協作性

當團隊中的每個人都遵循相同的格式慣例時，程式碼審查就會成為關於邏輯和架構的有意義討論，而非關於空白的爭論。格式一致也會減少合併衝突。

除錯能力

縮排風格與慣例

HTML 中的縮排之爭大致上與更廣泛的程式設計社群相同：空格還是 Tab，以及每一層使用幾個空格。

2 個空格

兩個空格的縮排是 HTML 中最流行的選擇，也是 Google 風格指南、Prettier 預設配置以及大多數現代前端框架所採用的方式。

<main>
  <section>
    <h1>Welcome</h1>
    <p>This is a paragraph.</p>
  </section>
</main>

其優勢在於程式碼精簡的同時仍能清楚展示層級結構。在 HTML 中深層巢狀是常見的情況，兩個空格能避免程式碼向右偏移太多。

4 個空格

四個空格的縮排在巢狀層級之間提供了更大的視覺間距，使層級結構更加鮮明。

<main>
    <section>
        <h1>Welcome</h1>
        <p>This is a paragraph.</p>
    </section>
</main>

一些團隊在巢狀較淺的 HTML 模板中偏好使用四個空格。然而，當複雜的佈局包含多層巢狀時，程式碼可能會被推到螢幕的遠端，造成不便。

Tab

選定一種風格並保持一致

HTML5 語義化元素

語義化元素向瀏覽器和輔助技術傳達含義。它們將泛用的 div 和 span 替換為專門描述內容角色的標籤。

文件結構元素

<body>
  <header>
    <nav>
      <a href="/">Home</a>
      <a href="https://example.com/about">About</a>
    </nav>
  </header>

  <main>
    <article>
      <h1>Article Title</h1>
      <p>Article content goes here.</p>

      <section>
        <h2>Subsection</h2>
        <p>More detailed content.</p>
      </section>
    </article>

    <aside>
      <h2>Related Links</h2>
      <ul>
        <li><a href="https://example.com/related">Related Article</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 Example Inc.</p>
  </footer>
</body>

各元素的使用時機

<header> — 介紹性內容或導覽連結。不僅可用於頁面層級，也可出現在 <article> 或 <section> 內部。
<nav> — 主要導覽區塊。不要將每組連結都用 <nav> 包裹——僅用於主導覽。
<main> — 頁面的主要內容。每頁只能有一個，且不得巢狀在 <article>、<aside>、<header>、<footer> 或 <nav> 內部。
<article> — 獨立且自成一體的內容：部落格文章、新聞報導、論壇貼文、產品卡片。
<section> — 具有主題性的內容分組，通常附帶標題。當內容代表一個邏輯區段時，用它取代 div。
<aside> — 與周圍內容間接相關的內容：側邊欄、引言摘錄、相關連結。
<footer> — 最近區塊祖先的頁腳資訊。與 <header> 類似，它也可以出現在文章和段落中。

`div` 與語義化元素的差異

<!-- Avoid this -->
<div class="navigation">
  <div class="nav-links">
    <a href="/">Home</a>
  </div>
</div>

<!-- Prefer this -->
<nav>
  <a href="/">Home</a>
</nav>

無障礙設計模式

無障礙 HTML 不是一個獨立的考量——它就是寫得好的 HTML。大多數無障礙改進同時也會讓你的標記更加乾淨且具意義。

標題層級

標題必須遵循邏輯順序。切勿因為樣式需求而跳過層級——請改用 CSS 來調整視覺大小。

<!-- Correct hierarchy -->
<h1>Page Title</h1>
  <h2>Major Section</h2>
    <h3>Subsection</h3>
    <h3>Another Subsection</h3>
  <h2>Another Major Section</h2>

<!-- Incorrect — skips h2 -->
<h1>Page Title</h1>
  <h3>This skips a level</h3>

圖片替代文字

<!-- Informative image -->
<img src="chart.png" alt="Bar chart showing revenue growth from Q1 to Q4 2025">

<!-- Decorative image -->
<img src="decorative-border.png" alt="">

表單標籤

每個表單輸入欄位都必須有對應的標籤。標籤上的 for 屬性應與輸入欄位的 id 對應。

<label for="email">Email Address</label>
<input type="email" id="email" name="email" required>

避免使用佔位符文字來替代標籤。佔位符在使用者開始輸入時就會消失，從而移除了欄位所預期內容的上下文提示。

ARIA 標籤

當原生 HTML 語義不足時，使用 ARIA 屬性。然而，ARIA 的首要原則是：如果有原生 HTML 元素已經具備你所需的語義，那就直接使用它。

<!-- ARIA for custom components -->
<button aria-label="Close dialog" aria-expanded="false">
  <svg><!-- icon --></svg>
</button>

<!-- Better: use native semantics when possible -->
<button type="button">Close</button>

鍵盤導覽

屬性排序慣例

一致的屬性排序使 HTML 更容易掃描瀏覽。雖然沒有嚴格的標準，但一個被廣泛採用的慣例是按重要性和功能排列屬性：

<input
  type="email"
  id="user-email"
  name="email"
  class="form-input"
  placeholder="[email protected]"
  required
  aria-describedby="email-help"
  data-validate="email"
>

建議的排列順序：

type — 元素或輸入的類型
id — 唯一識別符
name — 表單提交名稱
class — 樣式掛鉤
src、href、for — 資源參考
value、placeholder — 內容屬性
required、disabled、checked — 布林狀態
aria-* — 無障礙屬性
data-* — 自訂資料屬性

這不是硬性規定，但在專案中保持一致非常重要。設定你的 Linter 來強制執行你所選擇的順序。

自閉合標籤、空元素與布林屬性

空元素

有些 HTML 元素不能包含內容，也不需要結束標籤。這些被稱為空元素：

<br>
<hr>
<img src="photo.jpg" alt="A sunset over the ocean">
<input type="text" name="search">
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">

在 HTML5 中，空元素不需要使用結尾斜線來自閉合（<br />）。斜線是可選的，純屬風格偏好。但如果你的專案使用 JSX 或 XHTML，自閉合語法是必須的。

布林屬性

布林屬性只有存在或不存在兩種狀態——不需要值。屬性存在代表 true，不存在代表 false。

<!-- These are equivalent -->
<input type="text" required>
<input type="text" required="required">
<input type="text" required="">

<!-- Preferred: just the attribute name -->
<input type="text" required>
<button disabled>Submit</button>
<video autoplay muted></video>

常見的 HTML 格式化錯誤

1. 不一致的縮排

混用 Tab 和空格，或每一層使用不同數量的空格，會造成視覺上的混亂。使用格式化工具來防止這個問題。

2. Div 巢狀濫用

在語義化元素能更好地傳達意義的情況下，卻將所有東西都包在 div 元素中。這會損害無障礙性、SEO 和程式碼可讀性。

<!-- Div soup -->
<div class="header">
  <div class="nav">
    <div class="nav-item"><a href="/">Home</a></div>
  </div>
</div>

<!-- Clean semantic markup -->
<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>

3. 缺少 Alt 屬性

省略圖片上的 alt 屬性是違反無障礙規範的行為，會在所有 HTML 驗證器中觸發警告。

4. 行內樣式

在 HTML 中到處添加 style 屬性會混淆關注點，使維護變得更加困難。請改用 CSS 類別。

5. 過深的巢狀結構

如果你的 HTML 達到了六、七層深的巢狀，請重新考慮你的佈局。過深的巢狀通常表明結構可以透過更好的元件架構來簡化。

6. 缺少文件語言

務必在 <html> 元素上包含 lang 屬性。螢幕閱讀器會使用它來選擇正確的發音規則。

<html lang="en">

7. 未使用 `<!DOCTYPE html>` 宣告

HTML 文件務必以 doctype 宣告開頭。沒有它，瀏覽器可能會以怪異模式渲染頁面，導致不一致的行為。

自動美化與程式碼檢查工具

手動格式化既容易出錯又繁瑣。自動化工具無需持續的人力投入即可確保一致性。

Prettier

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "htmlWhitespaceSensitivity": "css"
}

將 Prettier 設為 pre-commit hook 或在編輯器中啟用儲存時格式化，格式化就會變得完全自動化。

HTMLHint

HTMLHint 是一個專門針對 HTML 的靜態分析工具。它能捕捉格式化工具無法發現的問題——例如缺少 alt 屬性、重複的 ID 和已棄用的元素。

{
  "tagname-lowercase": true,
  "attr-lowercase": true,
  "attr-value-double-quotes": true,
  "tag-pair": true,
  "id-unique": true,
  "alt-require": true
}

編輯器整合

生產環境的壓縮

工具與資源

善用正確的工具能更容易維持良好的格式化習慣：

Code Minifier — 為生產環境壓縮 HTML、CSS 和 JavaScript，同時保持原始碼的整潔
Markdown Previewer — 預覽和格式化 Markdown 內容，該內容通常會生成 HTML 輸出

常見問題

HTML 縮排應該使用 2 個空格還是 4 個空格？

語義化 HTML 和普通 HTML 有什麼區別？

如果使用了語義化 HTML，還需要 ARIA 屬性嗎？

如何在團隊中統一 HTML 格式？

使用帶有共享配置檔案的 Prettier，添加 HTMLHint 配置進行程式碼檢查，並利用 Husky 和 lint-staged 等工具將兩者設為 pre-commit hook。

HTML 格式化最佳實踐：撰寫整潔的程式碼

為什麼良好的 HTML 格式化很重要

可讀性

可維護性

協作性

除錯能力

縮排風格與慣例

2 個空格

4 個空格

Tab

選定一種風格並保持一致

HTML5 語義化元素

文件結構元素

各元素的使用時機

div 與語義化元素的差異

無障礙設計模式

標題層級

圖片替代文字

表單標籤

ARIA 標籤

鍵盤導覽

屬性排序慣例

自閉合標籤、空元素與布林屬性

空元素

布林屬性

常見的 HTML 格式化錯誤

1. 不一致的縮排

2. Div 巢狀濫用

3. 缺少 Alt 屬性

4. 行內樣式

5. 過深的巢狀結構

6. 缺少文件語言

7. 未使用 <!DOCTYPE html> 宣告

自動美化與程式碼檢查工具

Prettier

HTMLHint

編輯器整合

生產環境的壓縮

工具與資源

常見問題

HTML 縮排應該使用 2 個空格還是 4 個空格？

語義化 HTML 和普通 HTML 有什麼區別？

如果使用了語義化 HTML，還需要 ARIA 屬性嗎？

如何在團隊中統一 HTML 格式？

對空元素使用自閉合語法（如 <br />）可以嗎？

相關資源

HTML 格式化最佳實踐：撰寫整潔的程式碼

為什麼良好的 HTML 格式化很重要

可讀性

可維護性

協作性

除錯能力

縮排風格與慣例

2 個空格

4 個空格

Tab

選定一種風格並保持一致

HTML5 語義化元素

文件結構元素

各元素的使用時機

div 與語義化元素的差異

無障礙設計模式

標題層級

圖片替代文字

表單標籤

ARIA 標籤

鍵盤導覽

屬性排序慣例

自閉合標籤、空元素與布林屬性

空元素

布林屬性

常見的 HTML 格式化錯誤

1. 不一致的縮排

2. Div 巢狀濫用

3. 缺少 Alt 屬性

4. 行內樣式

5. 過深的巢狀結構

6. 缺少文件語言

7. 未使用 <!DOCTYPE html> 宣告

自動美化與程式碼檢查工具

`div` 與語義化元素的差異

7. 未使用 `<!DOCTYPE html>` 宣告

對空元素使用自閉合語法（如 `<br />`）可以嗎？

`div` 與語義化元素的差異

7. 未使用 `<!DOCTYPE html>` 宣告

對空元素使用自閉合語法（如 `<br />`）可以嗎？