為什么使用<h1> 標(biāo)記和 <p> 標(biāo)記編寫 HTML？ 為什么不干脆統(tǒng)一使用 <div> 和 <span> 標(biāo)記？ 為什么要使用特定的 HTML 標(biāo)記？

原因在于，<p> 和 <h1>它們分別表示“這是一個(gè)段落”及“這是一個(gè)初級(jí)標(biāo)題”。 這就是 語(yǔ)義HTML，作者應(yīng)當(dāng)竭盡所能確保 HTML 標(biāo)志適當(dāng)組織整理內(nèi)容。 所有 Web 開發(fā)人員均在一定程度上運(yùn)用過語(yǔ)義 HTML。 本文將對(duì)語(yǔ)義 HTML 進(jìn)行闡述，并解釋為什么應(yīng)當(dāng)更加深入地對(duì)其進(jìn)行了解。

語(yǔ)義 HTML 是什么？

簡(jiǎn)而言之，語(yǔ)義 HTML 是一種使用正確的元素或標(biāo)記開展作業(yè)的 HTML。 以 <h1>元素為例。它有什么用途？ 語(yǔ)義學(xué)答案是“用作頁(yè)面的頂級(jí)標(biāo)題”。 使用 <h1> 元素僅僅是為了放大文本，這是非語(yǔ)義 HTML 的典型例子。 除標(biāo)題標(biāo)記（<h1> 到 <h6>）外，還有許多其他 HTML 元素，從常見的 <p>元素到極少遇到的<cite> 和 <dfn>元素應(yīng)有盡有。 每個(gè)元素都具有特定的含義，每個(gè)元素都可以用來(lái)提供更好的 HTML 結(jié)構(gòu)，以便通過 CSS 進(jìn)行樣式設(shè)計(jì)，及通過 JavaScript 開展操作。

語(yǔ)義 HTML 還通過定性內(nèi)容而不是單純憑借外觀來(lái)標(biāo)記內(nèi)容。 例如，想想無(wú)處不在的博客存檔面板。 它是一個(gè)鏈接至其他博客頁(yè)面的鏈接列表，往往位于頁(yè)面右側(cè)。 當(dāng)為存檔指定 ID 或?yàn)?CSS 樣式指定類時(shí)，您可以使用名稱反映其在頁(yè)面上的位置；例如 rightpanel 。 或者，您也可以利用名稱表示它在內(nèi)容中所扮演的角色；例如sidebar 或者 archive更好。

語(yǔ)義 HTML 具有以下特性：

文字包裹在元素中，用以反映內(nèi)容。例如：

段落包含在 <p> 元素中。

順序表包含在<ol>元素中。

從其他來(lái)源引用的大型文字塊包含在<blockquote>元素中。

HTML 元素不能用作語(yǔ)義用途以外的其他目的。例如：

<h1>包含標(biāo)題，但并非用于放大文本。

<blockquote>包含大段引述，但并非用于文本縮進(jìn)。

空白段落元素 ( <p></p> ) 并非用于跳行。

文本并不直接包含任何樣式信息。例如：

不使用 <font> 或 <center> 等格式標(biāo)記。

類或 ID 中不引用顏色或位置。

所有這一切的目的在于促使代碼使用者（無(wú)論是用戶、瀏覽器還是屏幕閱讀器）能夠使用內(nèi)容，并從機(jī)器的客觀角度和用戶的主觀角度輕松地對(duì)其進(jìn)行解析。

為什么我要專門介紹語(yǔ)義 HTML？

傳統(tǒng)而言，有五種有利于語(yǔ)義 HTML 的主要論點(diǎn)。

代碼更少

CSS 樣式的語(yǔ)義 HTML 所需的代碼往往比表格格式的 HTML 少。 但是，您不能編寫完全無(wú)表格的 HTML，這不是語(yǔ)義 HTML 的真正含義。 您仍然可以縮小代碼規(guī)模，但卻無(wú)法使代碼更加容易理解。

可訪問性

可訪問性是指協(xié)助殘疾人士使用您的網(wǎng)站。 語(yǔ)義代碼往往 具有更高可訪問性。 當(dāng)您將頁(yè)面各個(gè)部分標(biāo)記為片頭、標(biāo)題、段落和列表，使屏幕閱讀器及其他輔助技術(shù)能夠更加輕松地以殘疾人士能夠理解的方式解析及呈現(xiàn)內(nèi)容。 不過，要注意對(duì)“往往”一詞的強(qiáng)調(diào)。 語(yǔ)義 HTML 解決方案并不神奇，并不能使您的網(wǎng)站符合可訪問性原則，它只是用于簡(jiǎn)化可訪問網(wǎng)站構(gòu)建過程。

搜索引擎優(yōu)化

由于具有可訪問性功能，語(yǔ)義 HTML 往往通過使您的網(wǎng)站更加便于軟件解析網(wǎng)站內(nèi)容來(lái)完善搜索引擎優(yōu)化 (SEO) 特性。 搜索引擎會(huì)掃描 HTML 文件中包含的 HTML 文本。 它們不呈現(xiàn) CSS，也不運(yùn)行 JavaScript。 如果您的重要內(nèi)容并非以 HTML 格式呈現(xiàn)，則搜索引擎可能無(wú)法進(jìn)行查看，更不會(huì)相應(yīng)地進(jìn)行排列。 此外，通過刪除頁(yè)面中的 HTML 垃圾，僅留下描述內(nèi)容的標(biāo)記，搜索引擎將能夠更加輕松地識(shí)別網(wǎng)站的真正主旨。 這項(xiàng)技術(shù)稱作“白帽” SEO。 這樣完全可以接受，沒有任何搜索引擎會(huì)就此對(duì)您實(shí)施處罰，因?yàn)槟呀?jīng)在語(yǔ)義方面對(duì)頁(yè)面進(jìn)行了優(yōu)化。 （相反，使用隱藏文本加強(qiáng)特定主題的相關(guān)性則被稱作“黑帽”SEO。）

應(yīng)當(dāng)指出的是，任何人都無(wú)法保證語(yǔ)義 HTML 更加適于 SEO。 Web 開發(fā)人員將搜索引擎視作 首選語(yǔ)義 HTML，Google HTML5 輸入將此操作作為建議操作。然而，搜索引擎均嚴(yán)格遵守自身算法，不得不允許以非語(yǔ)義 HTML 編寫極度相關(guān)的內(nèi)容。

重復(fù)利用

語(yǔ)義 HTML 充分利用以下優(yōu)勢(shì)：“新聞項(xiàng)目”始終是新聞項(xiàng)目，“存檔”永遠(yuǎn)是存檔，而無(wú)論它們?cè)陧?yè)面上的位置如何。 不過，rightbar 卻并不總是位于右側(cè)。 此外，如果您通過 RSS 源同時(shí)發(fā)布內(nèi)容，并在其中納入 HTML，則標(biāo)記越少越好。 然而，絕大多數(shù)網(wǎng)站和博客并不直接從經(jīng)過特別處理的 HTML 同時(shí)發(fā)布內(nèi)容。 它們往往單獨(dú)構(gòu)建，并會(huì)對(duì)聯(lián)合格式進(jìn)行處理以確保其他用戶理解內(nèi)容。

開發(fā)人員解讀

您可能已經(jīng)注意到，迄今為止語(yǔ)義 HTML 參數(shù)中已經(jīng)納入主題。 所有這一切聽起來(lái)都有很好的理由使用語(yǔ)義 HTML，但單獨(dú)而言，沒有一項(xiàng)特性真正讓我心動(dòng)。或許全部特性加起來(lái)足以讓您心馳神往。 如果是這樣，那真是太棒了。 但我承認(rèn)，當(dāng)下有一個(gè)很好的理由編寫語(yǔ)義 HTML。 對(duì)于計(jì)算機(jī)開發(fā)人員（這是比較容易的部分）及其他開發(fā)人員而言，編碼就是通信。 語(yǔ)義 HTML 比非語(yǔ)義 HTML 更加便于用戶理解。r1c4 類div元素并不像所謂的 pullquote元素那樣容易理解。 借助語(yǔ)義 HTML，您便可以幫助其他開發(fā)人員和 HTML 創(chuàng)作者理解代碼的用途。

值得注意的是，該領(lǐng)域存在很大的主觀性。 在這篇 關(guān)于 HTML 語(yǔ)義和前端架構(gòu)的文章中，Nicholas Gallagher 證實(shí)了類和 IDs 不能是非語(yǔ)義形式，因?yàn)檎Z(yǔ)義與含義息息相關(guān)，而您在類或 ID 中放置的任何元素均具有意義。 他的邏輯非常合理，但在我看來(lái)，這并不是看待問題的最佳方式。

語(yǔ)義不是二進(jìn)制。 您無(wú)法實(shí)現(xiàn)完全語(yǔ)義化，也無(wú)法完全保持非語(yǔ)義化。 語(yǔ)義是一個(gè)連續(xù)特性。 Web 內(nèi)容介于完全非語(yǔ)義化和完全語(yǔ)義化之間，因?yàn)檫@兩個(gè)極端是無(wú)法達(dá)到的。 考慮到這一點(diǎn)，當(dāng)您持續(xù)簡(jiǎn)化 Web 內(nèi)容用戶理解 Web 內(nèi)容片段含義的同時(shí)，將可以跨越非語(yǔ)義化到語(yǔ)義化的鴻溝移動(dòng)內(nèi)容。

語(yǔ)義 HTML 提供了哪些全新元素？

HTML 語(yǔ)義其中一個(gè)頗具爭(zhēng)議的部分在于 ID 和類的命名。 部分問題在于 HTML 規(guī)范定義的內(nèi)容與實(shí)際頁(yè)面上顯示的內(nèi)容之間的差距。 例如，拿網(wǎng)站導(dǎo)航來(lái)說(shuō)。 由于二十世紀(jì)九十年代中期，導(dǎo)航菜單已經(jīng)發(fā)展到無(wú)處不在的地步，但當(dāng)時(shí)很長(zhǎng)一段時(shí)間缺乏標(biāo)記導(dǎo)航的單一標(biāo)準(zhǔn)化方法。 文章或帖子形式的頁(yè)眉、頁(yè)腳和內(nèi)容也是一樣。 由于缺乏相關(guān)的標(biāo)準(zhǔn)化方法，并且存在大量可能操作途徑，因而在操作方式上存在相當(dāng)大的分歧。

其中一些問題已通過 HTML5 得到緩解。 在 HTML5 規(guī)范的發(fā)展過程中，各大領(lǐng)先的 Web 內(nèi)容企業(yè)共享了對(duì)一些常用 ID 和類名稱的分析結(jié)果，并將其作為指導(dǎo)創(chuàng)建新的 HTML5 元素，這些元素對(duì)于標(biāo)記許多常用 Web 內(nèi)容片段非常有效。 結(jié)果生成一系列新的元素，其中包括：

<header> 
 
<footer> 
 
<nav> 
 
<article> 

還有許多其他元素，我們將在 W3C 的 HTML4 與 HTML5 的差異列表中進(jìn)行詳細(xì)闡釋。

關(guān)鍵在于建立更加標(biāo)準(zhǔn)的內(nèi)容標(biāo)記方法。 標(biāo)記方法越統(tǒng)一，越便于用戶與設(shè)備使用內(nèi)容。

語(yǔ)義專為您服務(wù)，而不是您為語(yǔ)義服務(wù)

我認(rèn)為 HTML 語(yǔ)義存在的最大問題之一在于，人們往往將語(yǔ)義 HTML 的功能視為客觀規(guī)則而非指導(dǎo)原則。 您應(yīng)當(dāng)（但并非必須）采用有效的語(yǔ)義編寫 HTML。如果您要使用語(yǔ)義 HTML，那么用它來(lái)強(qiáng)化內(nèi)容將比遵循一系列最佳實(shí)踐（而不了解背后理論）的效果更好。

語(yǔ)義促使 HTML 更加易于理解。 這意味著您要注意，確保<h1> 標(biāo)記、 <h2> 標(biāo)記及<h3>標(biāo)記妥善嵌套。 意味著您應(yīng)當(dāng)不遺余力地確保 <section>是包裝某些內(nèi)容的正確標(biāo)記。 這并不是說(shuō)您應(yīng)當(dāng)進(jìn)入為期一周的電子郵件線程（包含四十封郵件），討論該頁(yè)面的<div> 標(biāo)記是否應(yīng)當(dāng)具有 news 或 breakingID。 經(jīng)過一番審慎思考，選擇一個(gè)，然后繼續(xù)您的生活。 只要將實(shí)際想法運(yùn)用到內(nèi)容內(nèi)涵溝通中，就應(yīng)該沒有問題。 另一名開發(fā)人員將走過來(lái)，查看并理解內(nèi)容，而后便可立即投入工作。假設(shè)您選擇 news 。 此時(shí)，心存語(yǔ)義思想的開發(fā)人員將會(huì)感到奇怪，為什么在顯然應(yīng)當(dāng)是 breaking 的情況下將其命名為 news。 您幾乎無(wú)法在諸如此類的主觀領(lǐng)域阻止此類質(zhì)疑。 但是，它們?cè)僖膊粫?huì)混淆頁(yè)眉、頁(yè)腳或?qū)Ш綑冢@是一個(gè)更加重大的成就。

下一步閱讀方向

語(yǔ)義方法意義重大，能夠有效增強(qiáng)可訪問性、SEO、可重用性及開發(fā)人員之間的交流。 它們連續(xù)存在，您的目標(biāo)應(yīng)當(dāng)伴隨這種連續(xù)性擴(kuò)展至更加語(yǔ)義化的內(nèi)容，但不能試圖達(dá)到完美語(yǔ)義這個(gè)遙不可及的目標(biāo)，否則無(wú)異于自殺。

下面是一些用于幫助您提升語(yǔ)義 HTML 作用的方法。

要了解有關(guān)一般性語(yǔ)義的詳細(xì)信息，請(qǐng)參閱：

W3C HTML5 參考

萬(wàn)維網(wǎng)聯(lián)盟 (W3C) 是一家 Web 標(biāo)準(zhǔn)機(jī)構(gòu)。 因此，他們負(fù)責(zé)對(duì)所有元素進(jìn)行定義。 他們?cè)?HTML 元素的使用方面具有獨(dú)到的見解（或者說(shuō)絕對(duì)看法，具體取決于您咨詢的人員）。 HTML 中的每個(gè)元素均包含細(xì)節(jié)文檔，其中包括元素的語(yǔ)義用法。

whichElement.com

WhichElement.com 是一家網(wǎng)站，我最初就是以此為起點(diǎn)討論適當(dāng)?shù)膬?nèi)容語(yǔ)義。 例如，如果您尋求以語(yǔ)義的形式標(biāo)記日歷，whichElement.com 將為您帶來(lái)福音。

要了解有關(guān) HTML5 語(yǔ)義的詳細(xì)信息，請(qǐng)參閱：

HMTL5 Doctor

HTML5 Doctor 是一種幫助開發(fā)人員利用 HTML5 的資源，因?yàn)樗冀K處于一種參與狀態(tài)。 該網(wǎng)站提供了大量有關(guān) HTML5 元素語(yǔ)義用法的不錯(cuò)信息。

Adobe 開發(fā)人員連接

Stephanie (Sullivan) Rewis 編寫了一個(gè)很棒的系列文章 了解 HTML5 語(yǔ)義，從而幫助您了解如何使用新型語(yǔ)義 HTML 元素。