空元素是不能包含子內容，而且不能具有結束標籤的 HTML 元素。
例子包括 <img>、<input> 和 <br>：
<img src="images/classroom.jpg" alt="設有電腦的課室">
<input type="email" name="email">
<br>空元素只有開始標籤。 所需資料透過屬性提供，而不是放在開始及結束標籤之間。
24.1 標準空元素
目前 HTML 的空元素包括：
| 元素 | 用途 |
|---|---|
<area> | 定義影像地圖中的區域 |
<base> | 設定文件的基底 URL 或預設瀏覽環境 |
<br> | 插入換行 |
<col> | 指定欄群組內的表格欄 |
<embed> | 嵌入外部內容 |
<hr> | 表示主題分隔 |
<img> | 嵌入圖片 |
<input> | 提供輸入控制元素 |
<link> | 指定與外部資源的關係 |
<meta> | 提供文件中繼資料 |
<source> | 為媒體或 <picture> 提供來源 |
<track> | 為音訊或影片提供定時文字 |
<wbr> | 標示可以換行的位置 |
這些元素具有不同用途及放置規則。屬於空元素，不代表可以出現在文件的任何位置。
24.2 不使用結束標籤
正確寫法：
<img src="images/course.jpg" alt="正在練習 HTML 的學員">
<input type="text" name="fullName">
<hr>不要寫成：
<!-- 無效 HTML：空元素不能具有結束標籤。 -->
<img src="images/course.jpg" alt="正在練習 HTML 的學員"></img>
<input type="text" name="fullName"></input>
<hr></hr>瀏覽器可能修復無效標記，但這不是使用錯誤寫法的理由。
尤其是 </br>，HTML 剖析器可能將它當成另一個換行，而不是單純忽略。
24.3 空元素不能包住內容
空元素不能包含文字或其他元素。
錯誤寫法：
<!-- 文字不是 input 內的內容。 -->
<input type="submit">發送查詢</input>使用輸入元素作為提交控制項時，應以 value 提供文字：
<input type="submit" value="發送查詢">也可以使用能包含文字的按鈕：
<button type="submit">發送查詢</button>同樣，圖片的替代文字應放在 alt，而不是標籤之間：
<img
src="images/library.jpg"
alt="學習中心圖書館內的書架"
>24.4 HTML 中的尾端斜線
你可能會遇到這種寫法：
<img src="images/course.jpg" alt="課程課室" />
<input type="email" name="email" />HTML 語法允許空元素的開始標籤帶有尾端斜線，但斜線不會令元素自行關閉。該元素本身已經是空元素。
以下兩種寫法具有相同的 HTML 意義：
<br>
<br />一般 HTML 中，省略斜線是清晰、一致的慣例。
為屬性值加上引號
如果斜線緊接未加引號的屬性值，它可能成為該值的一部分：
<!-- 斜線成為 src 值的一部分。 -->
<img src=images/course.jpg/>瀏覽器會將來源解讀為 images/course.jpg/。
應優先寫成：
<img src="images/course.jpg" alt="課程課室">24.5 斜線不會關閉一般 HTML 元素
尾端斜線不會令非空 HTML 元素自行關閉：
<!-- 錯誤：這不會關閉 div。 -->
<div class="notice" />
<p>課程資料</p>應明確寫出結束標籤：
<div class="notice"></div>
<p>課程資料</p>相同規則也適用於 <span>、<textarea> 和 <script> 等元素。
<textarea name="message"></textarea>
<script src="app.js"></script>在 HTML 文件中，為這些元素使用 XML 式自行關閉語法，可能產生非預期的文件結構，或令內容無法正確解讀。
24.6 空元素與可省略的結束標籤
部分非空元素允許在特定條件下省略結束標籤。
例如：
<ul>
<li>HTML
<li>CSS
</ul>這些 <li> 不是空元素。它們包含內容，只是在這個結構中可以省略結束標籤。
入門範例通常明確寫出結束標籤，會更容易閱讀：
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>| 特點 | 空元素 | 結束標籤可省略的元素 |
|---|---|---|
| 能否包含子內容 | 否 | 可以 |
| 結束標籤 | 禁止使用 | 特定情況下可以省略 |
| 例子 | <img> | <li> |
目前沒有內容的元素，也不一定是空元素：
<p></p>
<div></div>這些元素只是碰巧沒有內容，本身仍然是非空元素。
24.7 HTML、XML 與 JSX
外觀相似的語法，會因語言不同而遵守不同規則。
HTML
<img src="images/course.jpg" alt="課程課室">
<div></div>空元素沒有結束標籤。尾端斜線不會關閉一般 HTML 元素。
XML 與 XHTML
XML 支援沒有內容的元素使用自行關閉語法：
<img src="images/course.jpg" alt="課程課室" />
<div />以 XML 傳送的 XHTML 遵守 XML 剖析規則。即使標記採用 XHTML 風格，只要以 text/html 傳送，仍然按 HTML 規則剖析。
JSX
JSX 要求標籤關閉：
<img src="images/course.jpg" alt="課程課室" />
<input type="email" name="email" />JSX 是 JavaScript 的語法擴充，不是原始 HTML 語法。
HTML 中的 SVG
SVG 元素屬於外來內容，具有不同的剖析規則：
<svg viewBox="0 0 100 100" aria-label="圓形示意圖" role="img">
<circle cx="50" cy="50" r="30" />
</svg>這裏的 <circle /> 自行關閉寫法有效，但不代表 <circle> 是 HTML 空元素。
24.8 常見空元素的實際用途
中繼資料與資源
以下元素通常位於 <head>：
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css"><link> 描述資源關係，不能取代可見的導覽連結：
<a href="courses.html">查看課程</a>換行與主題分隔
<p>
範例學習中心<br>
培訓部
</p>
<hr><br>在內容內建立換行。<hr>表示內容之間的主題分隔。
不要只為建立間距而重複使用 <br> 或使用 <hr>。應使用 CSS 外邊距、內邊距或框線。
可選的文字換行
<p>course<wbr>reference<wbr>identifier</p><wbr> 標示瀏覽器可以按需要換行的位置。它與 <br> 不同，不會強制換行。
24.9 無障礙功能仍然重要
空元素語法不會免除無障礙屬性及周圍結構的需要。
例如：
<label for="email">電郵地址</label>
<input
id="email"
name="email"
type="email"
autocomplete="email"
>輸入元素是空元素，但其標籤是獨立的非空元素。
圖片範例：
<img
src="images/html-workshop.jpg"
alt="正在完成 HTML 練習的學員"
>資訊性圖片應提供有意義的替代文字。純裝飾圖片則可以按情況使用空白替代文字：
<img src="images/decorative-divider.png" alt="">影像地圖連結中的每個可連結 <area>，都需要適當的文字替代內容。
24.10 完整範例：網頁中的空元素
以下獨立網頁示範中繼資料、換行、主題分隔、文字輸入欄位，以及可選的文字換行位置。
輸入欄位只供本頁練習，網頁沒有提交表單。
id: hong-kong-html-void-elements
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>
*,
*::before,
*::after {
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;
}
label {
display: block;
margin-block-end: 0.4rem;
font-weight: 700;
}
input {
display: block;
width: 100%;
padding: 0.65rem;
border: 1px solid #767676;
border-radius: 0.25rem;
color: #222;
background: white;
font: inherit;
}
input:focus-visible {
outline: 3px solid #005ea8;
outline-offset: 3px;
}
hr {
margin-block: 2rem;
border: 0;
border-block-start: 2px solid #767676;
}
.note {
padding: 1rem;
border-inline-start: 4px solid #005ea8;
background: #eaf2f8;
}
.help {
margin-block: 0.4rem 0;
color: #4b5563;
}
.reference {
max-width: 14rem;
padding: 0.75rem;
border: 1px solid #767676;
font-family: ui-monospace, monospace;
}
code {
font-family: ui-monospace, monospace;
}
</style>
</head>
<body>
<main>
<h1>空元素的實際用途</h1>
<p class="note">
空元素沒有子內容，也沒有結束標籤。
它們的屬性提供資料或設定行為。
</p>
<section>
<h2>有意義的換行</h2>
<p>
範例學習中心<br>
培訓部
</p>
<p>
<code><br></code>
將同一段落的內容分成兩行。
</p>
</section>
<section>
<h2>具有獨立標籤的輸入欄位</h2>
<label for="sample-name">範例學員姓名</label>
<input
id="sample-name"
type="text"
aria-describedby="sample-help"
>
<p id="sample-help" class="help">
請只使用範例文字。本頁沒有提交表單。
</p>
</section>
<hr>
<section>
<h2>可選的換行位置</h2>
<p class="reference">COURSE<wbr>REFERENCE<wbr>IDENTIFIER</p>
<p>
每個 <code><wbr></code>
都允許瀏覽器在可用寬度不足時換行。
</p>
</section>
<p>
空元素不能包含子內容，也不能使用結束標籤。
一般 HTML 元素不會因為加上斜線而自動關閉。
</p>
</main>
</body>
</html>在這個範例中：
<meta>設定文件中繼資料。<br>建立有意義的換行。<input>提供具有獨立標籤的控制元素。<hr>標示範例群組之間的轉換。<wbr>允許長識別碼在指定位置換行。- 所有空元素都沒有結束標籤。
- 不需要 JavaScript。
24.11 常見錯誤
| 錯誤 | 較好的做法 |
|---|---|
寫出 </img> 或 </input> | 空元素不使用結束標籤 |
| 將文字放在 input 內 | 使用適當屬性或其他元素 |
以為 HTML 中的 <div /> 會關閉 div | 寫成 <div></div> |
| 將沒有內容的元素當成空元素 | 區分目前沒有內容與空元素內容模型 |
| 混淆可省略與禁止使用的結束標籤 | 遵守各元素的語法規則 |
未加引號的屬性值緊接 / | 為屬性值加上引號 |
| 將 JSX 規則套用至原始 HTML | 使用實際語法的規則 |
| 以為 SVG 元素遵守一般 HTML 規則 | 考慮外來內容的剖析規則 |
重複使用 <br> 建立版面 | 使用 CSS 間距 |
只將 <hr> 用作裝飾框線 | 用它表示主題分隔 |
| 忘記標籤或替代文字 | 提供必要的無障礙背景資訊 |
本章總結： HTML 具有明確的一組空元素。它們不能包含子內容，也不能具有結束標籤。HTML 中的尾端斜線並非必要，而且不會關閉非空元素。應區分 HTML、XML、JSX 及 SVG 的語法規則。
