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

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

語義 HTML 是什么？

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

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

語義 HTML 具有以下特性：

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

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

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

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

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

<h1>包含標題，但并非用于放大文本。

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

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

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

不使用 <font> 或 <center> 等格式標記。

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

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

為什么我要專門介紹語義 HTML？

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

代碼更少

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

可訪問性

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

搜索引擎優(yōu)化

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

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

重復(fù)利用

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

開發(fā)人員解讀

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

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

語義不是二進制。 您無法實現(xiàn)完全語義化，也無法完全保持非語義化。 語義是一個連續(xù)特性。 Web 內(nèi)容介于完全非語義化和完全語義化之間，因為這兩個極端是無法達到的。 考慮到這一點，當您持續(xù)簡化 Web 內(nèi)容用戶理解 Web 內(nèi)容片段含義的同時，將可以跨越非語義化到語義化的鴻溝移動內(nèi)容。

語義 HTML 提供了哪些全新元素？

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

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

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

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

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

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

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

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

下一步閱讀方向

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

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

要了解有關(guān)一般性語義的詳細信息，請參閱：

W3C HTML5 參考

萬維網(wǎng)聯(lián)盟 (W3C) 是一家 Web 標準機構(gòu)。 因此，他們負責對所有元素進行定義。 他們在 HTML 元素的使用方面具有獨到的見解（或者說絕對看法，具體取決于您咨詢的人員）。 HTML 中的每個元素均包含細節(jié)文檔，其中包括元素的語義用法。

whichElement.com

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

要了解有關(guān) HTML5 語義的詳細信息，請參閱：

HMTL5 Doctor

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

Adobe 開發(fā)人員連接

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