格式簡介#
html 標籤的 lang 屬性由 7 個部分組成，常用的，在MDN上介紹的都是 1 號位、2 號位、4 號位。
- 語言：比如中文的
zh，英文的en - 擴展語言 (方言): 比如
cmn表示普通話，yue表示粵語，lzh表示文言文，主要用來指示屏幕閱讀器的朗讀效果 - 書寫系統 / 格式：比如
Hans表示簡體中文，Hant表示繁體中文 - 地區：比如
CN表示中國，HK表示香港 - 變種：用於指定語言的特定變體，以 zh 開頭的並且能寫這一項的比較少，比如
pinyin代表我們認知中的拼音，wadegile表示威妥瑪拼音，這兩個舉例都必須要前綴為zh-Latn的時候才能使用 - 擴展：用於添加特定於語言的擴展
- 私有使用：為私人使用而保留的子標籤。除非有特殊需要，否則一般不使用
擴展語言 / 方言 (2 號位)#
在以 zh 開頭的情況下，暫時有 13 個被批准的方言 (只討論方言，不是所有 zh 開頭的只有 13 個)，分別是:
-
cdo - 閩東話
-
cjy - 晉語
-
cpx - 莆仙話
-
czh - 惠州話
-
czo - 閩中話
-
gan - 贛州話
-
hak - 客家話
-
hsn - 湘語
-
lzh - 文言文
-
mnp - 閩北話
-
nan - 閩南話
-
wuu - 吳語
-
yue - 粵語
令人困惑的是，這些標籤可以作為 extlang (2 號位置) 表示方言 (如: zh-cdo)，也可以放在 language (1 號位置) 位置作為主語言 (如: cdo-Hans)。那麼這些標籤和傳統的 “zh” 標籤有什麼關係呢？IANA 把 “zh” 定義為 “macrolanguage”，我無法確定如何翻譯，宏語言？還是語系？BCP 47的觀點認為漢語包含若干語言，它似乎認為漢語的方言可以視為獨立的語言。
因此，以下兩種方式都是正確的
<html lang="zh-cdo-Hans">(zh 作為 1 號位置的主語言)<html lang="cdo-Hans">(cdo 這個方言做為 1 號位置的主語言)
弄清方言帶來的困惑之後，我個人的建議是使用 “zh” 作為主語言。我不想進行政治討論也不想研究深奧的學術問題，建議只使用 “zh” 做主語言子標籤的唯一理由是 —— 避免混亂。誰知道 IANA 的大佬們未來會批准出多少個中國的語言來，我們要都背下來？還是在維護代碼的時候問一下 AI 或者查一下字典看看這是哪一個犄角旮旯的外語 / 方言？
“zh” 表示中文，“zh-xxx” 仍然表示中文，但需要考慮方言特性。這樣的表達不會帶來任何誤解。
如何寫 HTML 的 lang 屬性#
越短越好！
W3C 的建議是：
The golden rule when creating language tags is to keep the tag as short as possible
因此，W3C 的示例 “zh-Hans”—— 中文簡體，就成了最好的用法。或者我個人認為只用 “zh” 也可以，混用簡繁也沒問題。
如何寫 CSS 匹配#
只寫前綴！
我在一些 GitHub 開源項目中看見了一些作者，在 CSS 中很認真的將所有的語種以及 2 號位都羅列出來了 (如: zh, zh-CN, zh-SG, zh-Hans, cmn, cmn-Hans, zh-cmn-Hans)，我很佩服作者這種認真的精神，相信他也一定為了集齊七龍珠查閱了很多資料，但是這是不必要的。我們來看一個例子，從圖中可以看出，無論html標籤的lang屬性寫的多麼複雜，在 CSS 中只需要寫前綴即可匹配到，並不需要將所有的方言窮舉出來，窮舉難免有遺漏，或是未來出現的新方言，這都可能導致 CSS 的匹配出現問題。
如果你不確定自己在做什麼，請不要窮舉，只寫前綴就好。
兼容性問題#
事實上在很多的中文網站上，我們經常可以看見zh-CN 的寫法，我並不清楚有多少瀏覽器不兼容這個寫法，因為從格式上來看，他跳過了 2 號位和 3 號位，也就是方言位和書寫格式位。從規範上來看，如果一定要表現CN 這個要素，或許zh-Hans-CN 會更加好一些 (僅省略供屏幕朗讀器使用的方言位)。