天這篇是我們正式開(kāi)篇的第一篇文章，我想和你聊聊 HTML。

我猜屏幕那一邊的你估計(jì)會(huì)說(shuō)：“HTML 我很熟悉了，每天寫(xiě)，這不是初級(jí)程序員才學(xué)的內(nèi)容

么，這我還能不會(huì)嗎？”

其實(shí)在我看來(lái)，HTML 并不簡(jiǎn)單，它是典型的“入門(mén)容易，精通困難”的一部分知識(shí)。深刻理

解 HTML 是成為優(yōu)秀的前端工程師重要的一步。

我們?cè)谏弦黄恼轮兄v到了，HTML 的標(biāo)簽可以分為很多種，比如 head 里面的元信息類標(biāo)

簽，又比如 img、video、audio 之類的替換型媒體標(biāo)簽。我今天要講的標(biāo)簽是：語(yǔ)義類標(biāo)簽。

語(yǔ)義類標(biāo)簽是什么，使用它有什么好處？

語(yǔ)義類標(biāo)簽也是大家工作中經(jīng)常會(huì)用到的一類標(biāo)簽，它們的特點(diǎn)是視覺(jué)表現(xiàn)上互相都差不多，

主要的區(qū)別在于它們表示了不同的語(yǔ)義，比如大家會(huì)經(jīng)常見(jiàn)到的 section、nav、p，這些都是

語(yǔ)義類的標(biāo)簽。

語(yǔ)義是我們說(shuō)話表達(dá)的意思，多數(shù)的語(yǔ)義實(shí)際上都是由文字來(lái)承載的。語(yǔ)義類標(biāo)簽則是純文字

的補(bǔ)充，比如標(biāo)題、自然段、章節(jié)、列表，這些內(nèi)容都是純文字無(wú)法表達(dá)的，我們需要依靠語(yǔ)

義標(biāo)簽代為表達(dá)。

在講語(yǔ)義之前，我們來(lái)說(shuō)說(shuō)為什么要用語(yǔ)義。

現(xiàn)在我們很多的前端工程師寫(xiě)起代碼來(lái)，多數(shù)都不用復(fù)雜的語(yǔ)義標(biāo)簽， 只靠 div 和 span 就能

走天下了。

這樣做行不行呢？毫無(wú)疑問(wèn)答案是行。那這樣做好不好呢？按照正確的套路，我應(yīng)該說(shuō)不好，

但是在很多情況下，答案其實(shí)是好。

這是因?yàn)樵诂F(xiàn)代互聯(lián)網(wǎng)產(chǎn)品里，HTML 用于描述“軟件界面”多過(guò)于“富文本”，而軟件界面

里的東西，實(shí)際上幾乎是沒(méi)有語(yǔ)義的。比如說(shuō)，我們做了一個(gè)購(gòu)物車(chē)功能，我們一定要給每個(gè)

購(gòu)物車(chē)?yán)锏纳唐诽咨?ul 嗎？比如說(shuō)，加入購(gòu)物車(chē)這個(gè)按鈕，我們一定要用 Button 嗎？

實(shí)際上我覺(jué)得沒(méi)必要，因?yàn)檫@個(gè)場(chǎng)景里面，跟文本中的列表，以及表單中的 Button，其實(shí)已

經(jīng)相差很遠(yuǎn)了，所以，我支持在任何“軟件界面”的場(chǎng)景中，直接使用 div 和 span。

不過(guò)，在很多工作場(chǎng)景里，語(yǔ)義類標(biāo)簽也有它們自己無(wú)可替代的優(yōu)點(diǎn)。正確地使用語(yǔ)義標(biāo)簽可

以帶來(lái)很多好處。語(yǔ)義類標(biāo)簽對(duì)開(kāi)發(fā)者更為友好，使用語(yǔ)義類標(biāo)簽增強(qiáng)了可讀性，即便是在沒(méi)

有 CSS 的時(shí)候，開(kāi)發(fā)者也能夠清晰地看出網(wǎng)頁(yè)的結(jié)構(gòu)，也更為便于團(tuán)隊(duì)的開(kāi)發(fā)和維護(hù)。除了

對(duì)人類友好之外，語(yǔ)義類標(biāo)簽也十分適宜機(jī)器閱讀。它的文字表現(xiàn)力豐富，更適合搜索

引擎檢索（SEO），也可以讓搜索引擎爬蟲(chóng)更好地獲取到更多有效信息，有效提升網(wǎng)頁(yè)的搜

索量，并且語(yǔ)義類還可以支持讀屏軟件，根據(jù)文章可以自動(dòng)生成目錄等等。不過(guò)，不恰當(dāng)?shù)厥?/p>

用語(yǔ)義標(biāo)簽，反而會(huì)造成負(fù)面作用。這里我們舉一個(gè)常見(jiàn)的誤區(qū)作為例子。我們都知道 ul 是

無(wú)序列表，ol 是有序列表，所以很多接觸過(guò)語(yǔ)義這個(gè)概念，半懂不懂的前端工程師，特別喜歡

給所有并列關(guān)系的元素都套上 ul。實(shí)際上， ul 是長(zhǎng)成下面的這種樣子的 (以下來(lái)自 HTML 標(biāo)準(zhǔn))。

I have lived in the following countries:

• Switzerland
• Norway
• United Kingdom
• United States

ul 多數(shù)出現(xiàn)正在行文中間，它的上文多數(shù)在提示：要列舉某些項(xiàng)。但是，如果所有并列關(guān)系都

用 ul，會(huì)造成大量冗余標(biāo)簽。錯(cuò)誤地使用語(yǔ)義標(biāo)簽，會(huì)給機(jī)器閱讀造成混淆、增加嵌套，給

CSS 編寫(xiě)加重負(fù)擔(dān)。所以，對(duì)于語(yǔ)義標(biāo)簽，我的態(tài)度是：“用對(duì)”比“不用”好，“不

用”比“用錯(cuò)”好。當(dāng)然了，我覺(jué)得有理想的前端工程師還是應(yīng)該去追求“用對(duì)”它們。

與 JavaScript 這樣嚴(yán)格的編程語(yǔ)言相比，HTML 中語(yǔ)義標(biāo)簽的使用更接近我們平常說(shuō)話用的

自然語(yǔ)言。我們說(shuō)話并沒(méi)有唯一的標(biāo)準(zhǔn)措辭，語(yǔ)義標(biāo)簽的使用也是一樣。下面，我挑選了幾種

（我認(rèn)為）比較重要的語(yǔ)義標(biāo)簽使用場(chǎng)景，來(lái)為你介紹一下。

作為自然語(yǔ)言延伸的語(yǔ)義類標(biāo)簽其實(shí)語(yǔ)義問(wèn)題不僅僅屬于理科，它還是個(gè)文科問(wèn)題。所以我們

這里講語(yǔ)義標(biāo)簽的使用的第一個(gè)場(chǎng)景，也是最自然的使用場(chǎng)景，就是：作為自然語(yǔ)言和

純文本的補(bǔ)充，用來(lái)表達(dá)一定的結(jié)構(gòu)或者消除歧義。

我們先來(lái)看看“表達(dá)一定的結(jié)構(gòu)”這個(gè)場(chǎng)景。在日語(yǔ)中，有一個(gè)語(yǔ)法現(xiàn)象叫做：ルビ，它的讀

音是 ruby（著名的 ruby 語(yǔ)言就是據(jù)此命名的），它中文的意思大約類似于注音或者意思的注

解，它的形式可以看下圖：圖中的例子選自動(dòng)畫(huà)片《某科學(xué)的超電磁炮》第二季第一話。圖中

把 teleport 放在空間移動(dòng)上方的用法，就是日文中 ruby 的用法。“空間移動(dòng)”是動(dòng)畫(huà)中白井

黑子的技能，這里動(dòng)畫(huà)字幕上寫(xiě)的是“空間移動(dòng)”，動(dòng)畫(huà)里的臺(tái)詞則用了英文發(fā)

音“Teleport”，這里就形成了一個(gè)使用

ruby 的場(chǎng)景。ruby 的這個(gè)形式，在中國(guó)的網(wǎng)友中間最近被玩出了新花樣，比如表情包。

有時(shí)候微信聊天，不能用 ruby 這樣的東西真的是好急啊，只好用括號(hào)代替，效果真是差了不

少。在 HTML5 中，就引入了這個(gè)表示 ruby 的標(biāo)簽，它由 ruby、rt、rp 三個(gè)標(biāo)簽來(lái)實(shí)現(xiàn)。

所以說(shuō)，這些情況里存在的語(yǔ)義，其實(shí)原本就存在了，只是我們用純文字是沒(méi)法表達(dá)的，

HTML作為一種“超文本”語(yǔ)言，支持這些文字表達(dá)就是必要的了。還有一種情況是，HTML

的有些標(biāo)簽實(shí)際上就是必要的，甚至必要的程度可以達(dá)到：如果沒(méi)有這個(gè)標(biāo)簽，文字會(huì)產(chǎn)生歧

義的程度。

這里我們可以介紹一下 em 標(biāo)簽。

我們看看這句話，

1. 今天我吃了一個(gè)蘋(píng)果.

再比如：

昨天我吃了一個(gè)香蕉。

今天我吃了一個(gè)蘋(píng)果。

看上去它很清楚，但是實(shí)際上，這句話放到不同上下文中，可能表達(dá)完全不

同的意思。

昨天我吃了兩個(gè)蘋(píng)果。

今天我吃了一個(gè)蘋(píng)果。

試著讀一讀，這兩段里面的“今天我吃了一個(gè)蘋(píng)果”，你是不是發(fā)現(xiàn)讀音不自覺(jué)地發(fā)生了變化？

實(shí)際上，不僅僅是讀音，這里的意思也發(fā)生了變化。前一段中，表示我今天吃的是蘋(píng)果，而不是別的什么東西，后一段中，則表示我今天只吃了一個(gè)蘋(píng)果，沒(méi)有多吃。

當(dāng)沒(méi)有上下文時(shí)，如何消除歧義呢？這就要用到我們的 em 標(biāo)簽了。em 表示重音：

通過(guò) em 標(biāo)簽，我們可以消除這樣的歧義。

一些文章常常會(huì)拿 em 和 strong 做對(duì)比，實(shí)際上，我們只要理解了 em 的真正意思，它和

strong 可謂天差地別，并沒(méi)有任何混淆的可能。

作為標(biāo)題摘要的語(yǔ)義類標(biāo)簽

介紹完自然語(yǔ)言的語(yǔ)義場(chǎng)景后，我想介紹的另一個(gè)語(yǔ)義重要使用場(chǎng)景，就是文章的結(jié)構(gòu)。中國(guó)古

代小說(shuō)就形成了“章 - 回”的概念，西方的戲劇也有幕的區(qū)分，所以人類的自然語(yǔ)言作品也是如出一轍。

HTML 也應(yīng)該支持這樣的需求。HTML 語(yǔ)義標(biāo)簽中，有不少是用于支持這樣的結(jié)構(gòu)的標(biāo)簽。

語(yǔ)義化的 HTML 能夠支持自動(dòng)生成目錄結(jié)構(gòu)，HTML 標(biāo)準(zhǔn)中還專門(mén)規(guī)定了生成目錄結(jié)構(gòu)的算

法，即使我們并不打算深入實(shí)踐語(yǔ)義，也應(yīng)該盡量在大的層面上保證這些元素的語(yǔ)義化使用。

首先我們需要形成一個(gè)概念，一篇文檔會(huì)有一個(gè)樹(shù)形的目錄結(jié)構(gòu)，它由各個(gè)級(jí)別的標(biāo)題組成。這

個(gè)樹(shù)形結(jié)構(gòu)可能不會(huì)跟 HTML 元素的嵌套關(guān)系一致。

這段 HTML 幾乎是平鋪的元素，但是它的標(biāo)題結(jié)構(gòu)是：

HTML 語(yǔ)義

弱語(yǔ)義

今天我吃了一個(gè) <em> 蘋(píng)果 </em>。

今天我吃了 <em> 一個(gè) </em> 蘋(píng)果。

例如：