HTML 允許你識別文件及個別段落所使用的自然語言。
使用 lang 屬性：
<html lang="en">如果某段內容使用另一種語言，應在包含該內容的元素上宣告：
<p lang="zh-Hant">歡迎參加 HTML 課程。</p>宣告文件的主要語言，並標示內容中有意義的語言變更。 這有助輔助技術及其他具備語言識別能力的工具解讀文字。
30.1 為何語言宣告重要？
語言宣告可以幫助：
- 螢幕閱讀器選擇適當發音。
- 瀏覽器套用符合語言需要的文字排版。
- 拼字檢查工具選擇字典。
- 翻譯工具識別來源語言。
- CSS 套用特定語言的樣式。
這些效果取決於瀏覽器、可用語言支援及輔助技術。
宣告語言不會翻譯內容，也不保證已安裝所需的語音或字型。
30.2 設定文件語言
在根元素 <html> 上設定主要語言：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Course</title>
</head>
<body>
<h1>Introduction to HTML</h1>
</body>
</html>除非後代元素宣告不同語言，否則這項宣告會套用至整份文件。
應使用描述實際內容的語言，而不是根據開發者所在地、伺服器所在地或目標使用者的國籍選擇。
面向香港讀者的英文網頁，可以按需要使用地區標籤：
<html lang="en-HK">不過，如果沒有必要區分地區，單用 en 已經足夠。
30.3 語言標籤
HTML 使用 BCP 47 語言標籤。
常見例子包括：
| 標籤 | 意思 |
|---|---|
en | 英文 |
en-GB | 英國使用的英文 |
en-US | 美國使用的英文 |
en-HK | 香港使用的英文 |
zh | 中文，未指定文字系統或地區 |
zh-Hant | 使用繁體字書寫的中文 |
zh-Hans | 使用簡體字書寫的中文 |
zh-Hant-HK | 香港使用的繁體中文 |
yue | 粵語 |
ja | 日文 |
ar | 阿拉伯文 |
標籤可以識別語言，並在有需要時指定文字系統或地區：
<p lang="zh-Hant-HK">請選擇你有興趣的課程。</p>使用連字號，不要使用底線：
<!-- 正確。 -->
<html lang="en-GB">
<!-- 錯誤的語言標籤格式。 -->
<html lang="en_GB">語言標籤不區分大小寫，但遵守慣例可以提升可讀性：
- 語言：小寫。
- 文字系統：首字母大寫。
- 地區：大寫。
不要只為令宣告看起來更精確而加入子標籤。應選擇準確描述內容的標籤。
30.4 標示語言變更
在包含該段內容的最小合適元素上使用 lang：
<p>
法文問候語
<span lang="fr">Bonjour</span>
的意思是「你好」。
</p>完整段落：
<p lang="ja">このコースでは HTML の基礎を学びます。</p>整個區段：
<section lang="zh-Hant" aria-labelledby="chinese-heading">
<h2 id="chinese-heading">課程簡介</h2>
<p>本課程介紹 HTML 文件結構及無障礙設計。</p>
</section>所有後代元素都會繼承該語言，除非另一項宣告覆寫它。
並非每個外來詞、專有名稱或技術術語都需要獨立語言標記。應集中標示會影響解讀或發音的有意義變更。
30.5 語言繼承
語言宣告遵循文件結構：
<html lang="en">
<body>
<section lang="zh-Hant">
<h1>課程資訊</h1>
<p>請先閱讀課程簡介。</p>
<p lang="en">Please read the course introduction first.</p>
</section>
</body>
</html>在這個例子中：
- 文件的預設語言是英文。
- 區段使用繁體中文。
- 最後一段切換回英文。
空值宣告具有特定意思：
<span lang="">語言未知的文字</span>它表示語言未知，而不是繼承周圍的語言宣告。不要只為避免選擇語言而使用它。
30.6 語言不是字元編碼
以下宣告處理不同問題：
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
</head>| 宣告 | 用途 |
|---|---|
lang="zh-Hant" | 識別自然語言及文字系統 |
<meta charset="utf-8"> | 識別字元編碼 |
UTF-8 可以編碼多種語言的文字，但不會告訴瀏覽器某段內容使用甚麼語言。
同樣，lang 不能修復因錯誤字元編碼而解讀錯誤的文字。
儲存及傳送多語言內容時，應一致使用 UTF-8。
30.7 語言與文字方向
語言及書寫方向是不同屬性。
使用 dir 指定方向：
<p lang="ar" dir="rtl">مرحبًا بكم في دورة HTML.</p>常見值包括：
| 值 | 意思 |
|---|---|
ltr | 由左至右 |
rtl | 由右至左 |
auto | 根據內容中第一個具有強方向性的字元判斷方向 |
單靠 lang="ar"，不會設定由右至左的方向。
以阿拉伯文為主的文件：
<html lang="ar" dir="rtl">混合方向的文字可以使用 <bdi> 隔離姓名或其他插入值：
<p>
學員：
<bdi lang="ar">ليلى</bdi>
</p>應使用具有語意的方向標記，而不是加入空格或手動重新排列字元。
30.8 使用 :lang() 設定樣式
CSS 可以根據內容語言選取元素：
:lang(en) {
line-height: 1.6;
}
:lang(zh) {
line-height: 1.8;
}
:lang(ar) {
line-height: 1.9;
}:lang() 偽類別會考慮元素實際適用的語言，包括繼承的語言。
例如：
:lang(zh) {
font-family: system-ui, sans-serif;
}這可以匹配宣告為 zh-Hant 或 zh-Hant-HK 的內容。
它與簡單屬性選擇器不同：
[lang="zh-Hant"] {
font-weight: 500;
}這個選擇器只匹配具有完全相同屬性值的元素，不會直接匹配只是繼承該語言的後代元素。
特定語言的樣式應用來改善可讀性，而不是假設每種語言都需要完全不同的設計。
30.9 使用 hreflang 標示連結資源語言
使用 hreflang 表示連結資源的語言：
<a href="course-en.html" hreflang="en" lang="en">
English
</a>
<a
href="course-zh.html"
hreflang="zh-Hant"
lang="zh-Hant"
>
繁體中文
</a>兩個屬性具有不同意思：
lang識別連結文字的語言。hreflang識別連結資源的語言。
hreflang 不會改變目前網頁的語言，也不會翻譯目的地內容。
語言選擇介面應使用清晰的語言名稱。只使用旗幟並不合適，因為語言與國家並非一一對應。
相關語言版本也可以在 <head> 中識別：
<link rel="alternate" hreflang="en" href="https://example.com/course-en.html">
<link rel="alternate" hreflang="zh-Hant" href="https://example.com/course-zh.html">這些關係不會建立可見的語言切換介面。
30.10 翻譯提示
全域屬性 translate 表示翻譯工具是否應翻譯內容：
<p>
在編輯器中開啟 <code translate="no">index.html</code>。
</p>可用值包括：
| 值 | 意思 |
|---|---|
yes | 內容可以翻譯 |
no | 內容不應翻譯 |
這對必須保持不變的檔案名稱、程式碼、識別碼或產品名稱很有用。
它只是提示，不保證每個翻譯服務都會保留內容。
translate 不能取代 lang。
30.11 嵌入文件與語言中繼資料
iframe 包含獨立文件。應在該文件內宣告語言：
<!-- 父頁面。 -->
<iframe
src="course-zh.html"
title="繁體中文課程資訊"
></iframe>嵌入頁面應具有自己的宣告：
<html lang="zh-Hant">在 iframe 元素上設定 lang，不會設定嵌入文件的語言。
另外，不要使用以下舊式中繼資料模式取代根元素的語言宣告：
<!-- 不要以此取代 html lang。 -->
<meta http-equiv="Content-Language" content="en">使用 <html lang="en"> 識別文件文字的語言。HTTP Content-Language 中繼資料具有不同用途，涉及目標讀者的語言。
30.12 完整範例：多語言課程資訊
以下獨立網頁示範文件語言、語言變更、由右至左文字，以及翻譯提示。
不需要外部資源或 JavaScript。
id: hong-kong-html-content-languages
name: 內容語言 — 多語言 HTML 範例
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>內容語言 | 課程資訊</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;
}
.note {
padding: 1rem;
border-inline-start: 4px solid #005ea8;
background: #eaf2f8;
}
:lang(en) {
line-height: 1.7;
}
:lang(zh) {
line-height: 1.8;
}
:lang(ar) {
line-height: 1.9;
}
code {
font-family: ui-monospace, monospace;
}
</style>
</head>
<body>
<main>
<h1>不同語言的課程資訊</h1>
<p class="note">
文件的主要語言是香港使用的繁體中文。
其他語言的區段會各自宣告語言。
</p>
<section aria-labelledby="chinese-heading">
<h2 id="chinese-heading">繁體中文</h2>
<p>
歡迎參加 HTML 課程。
學習建立清晰、符合無障礙需要的網頁。
</p>
</section>
<section lang="en-HK" aria-labelledby="english-heading">
<h2 id="english-heading">English</h2>
<p>
Welcome to the HTML course.
Learn to create clear, accessible webpages.
</p>
</section>
<section
lang="ar"
dir="rtl"
aria-labelledby="arabic-heading"
>
<h2 id="arabic-heading">العربية</h2>
<p>
مرحبًا بكم في دورة HTML.
تعلموا إنشاء صفحات ويب واضحة وسهلة الوصول.
</p>
</section>
<section aria-labelledby="mixed-heading">
<h2 id="mixed-heading">句子內的語言變更</h2>
<p>
法文中的 <span lang="fr">Bonjour</span>
是問候語，意思是「你好」。
</p>
<p>
將你的第一個網頁儲存為
<code translate="no">index.html</code>。
翻譯時，檔案名稱應保持不變。
</p>
</section>
</main>
</body>
</html>在這個範例中：
<html lang="zh-Hant-HK">設定預設語言。- 繁體中文區段繼承該宣告。
- 英文及阿拉伯文區段宣告自己的語言。
dir="rtl"設定阿拉伯文區段的方向。- 法文詞語具有局部語言宣告。
- CSS 使用
:lang()設定符合語言需要的行距。 translate="no"要求翻譯工具保留檔案名稱。
螢幕閱讀器的發音仍然取決於已安裝語音及語言切換設定。
30.13 常見錯誤
| 錯誤 | 較好的做法 |
|---|---|
| 省略文件語言 | 在 <html> 上設定 lang |
| 根據伺服器所在地選擇語言 | 描述實際內容 |
| 在語言標籤中使用底線 | 使用連字號 |
| 以為 UTF-8 能識別語言 | 同時宣告編碼及語言 |
| 沒有標示大段翻譯內容的語言 | 加入局部語言宣告 |
| 以為語言會設定文字方向 | 按需要使用 dir |
使用 hreflang 標示目前文字 | 使用 lang 識別文字語言 |
| 只用旗幟提供語言選擇 | 提供可閱讀的語言名稱 |
| 以為父頁面語言會套用至 iframe 內部 | 在嵌入文件內宣告語言 |
將 translate="no" 視為保證保護 | 將它視為翻譯提示 |
使用中繼資料取代 <html lang> | 直接宣告根元素語言 |
本章總結： 使用 lang 識別文件主要語言及內容中有意義的語言變更。選擇適當的 BCP 47 標籤，區分語言、編碼及方向，並為嵌入文件提供自己的宣告。語言標記有助解讀內容，但不會翻譯文字，也不保證語言工具的行為。
