楊勇

本文立足于常見(jiàn)html標(biāo)簽，具體以比較重要的H標(biāo)簽為研究對(duì)象，探討其蘊(yùn)涵的豐富語(yǔ)義功能，將用戶可讀性體驗(yàn)與機(jī)器可讀性緊密結(jié)合，進(jìn)一步規(guī)范html標(biāo)簽在網(wǎng)頁(yè)中不恰當(dāng)和混亂應(yīng)用的局面，推進(jìn)html文檔結(jié)構(gòu)化、web語(yǔ)義化的快速發(fā)展。在實(shí)際應(yīng)用層面，指導(dǎo)web設(shè)計(jì)師制作出美觀且對(duì)于搜索引擎友好的優(yōu)秀界面。

概述

在html5新標(biāo)準(zhǔn)即將發(fā)布之際，網(wǎng)頁(yè)內(nèi)容語(yǔ)義化再一次受到人們的高度關(guān)注。Web語(yǔ)義化的設(shè)計(jì)思想已成為每一個(gè)設(shè)計(jì)師無(wú)法回避的事實(shí)，很多網(wǎng)站也面臨著被淘汰的危機(jī)，于是，我們需要對(duì)習(xí)慣了的東西進(jìn)行重新審視。

什么是web語(yǔ)義化？其包括兩層含義：網(wǎng)頁(yè)內(nèi)容對(duì)機(jī)器(搜索引擎)是可理解、可讀的，機(jī)器可以輕松通過(guò)標(biāo)記描述的信息，處理網(wǎng)頁(yè)上的鏈接、關(guān)鍵詞、鏈接深度、權(quán)重、排名等內(nèi)容；二是網(wǎng)頁(yè)內(nèi)容對(duì)用戶是可理解的,可讀的，用戶可以根據(jù)網(wǎng)頁(yè)描述信息及表現(xiàn)形式判斷網(wǎng)頁(yè)內(nèi)容的重要性及與主題的相關(guān)性，從而根據(jù)網(wǎng)頁(yè)的情境快速找到自己想要的結(jié)果。Web語(yǔ)義化的終極目標(biāo)是將機(jī)器可讀性與用戶可讀性相結(jié)合，即人能看懂，機(jī)器也能讀懂，當(dāng)然這一條路互聯(lián)網(wǎng)還有很大一段距離。H標(biāo)簽的語(yǔ)義化便是朝著這個(gè)方向跨出的一步。

要實(shí)現(xiàn)web語(yǔ)義化設(shè)計(jì)，H標(biāo)簽的語(yǔ)義化必先行。解決H標(biāo)簽語(yǔ)義化的方法如下：

明確H標(biāo)簽在網(wǎng)頁(yè)中的語(yǔ)義

把握H標(biāo)簽使用時(shí)機(jī)

運(yùn)用H標(biāo)簽優(yōu)化站點(diǎn)的方法

如何使用H標(biāo)簽

（一）H標(biāo)簽的定義

H標(biāo)簽也叫heading標(biāo)簽，屬于塊級(jí)標(biāo)記。一般情況下一個(gè)H標(biāo)記獨(dú)占網(wǎng)頁(yè)的一塊區(qū)域。H標(biāo)簽共有六對(duì)標(biāo)記，

到

。H標(biāo)簽用于定義標(biāo)題。

定義最大的標(biāo)題。

定義最小的標(biāo)題。H標(biāo)簽支持如下屬性：id, class, title, style, dir, lang, xml:lang。

（二）H標(biāo)簽的用法

-

的具體用法如下：

這是一級(jí)標(biāo)題

這是二級(jí)標(biāo)題

這是三級(jí)標(biāo)題

這是四級(jí)標(biāo)題

這是五級(jí)標(biāo)題

這是六級(jí)標(biāo)題

默認(rèn)運(yùn)行效果如圖1：

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

W3C指出h1-h6標(biāo)記用于定義標(biāo)題。h1定義字體最大的標(biāo)題，h6定義字體最小的標(biāo)題。h1，h2，h3，h4，h5，h6，作為標(biāo)題標(biāo)記，外觀從大到小，重要性也依次遞減。遵循這樣的原則，它讓頁(yè)面的層級(jí)關(guān)系更清楚，讓搜索引擎更好地抓取和分析出頁(yè)面的主題內(nèi)容等等。

（一）h1一級(jí)標(biāo)題

標(biāo)記中的內(nèi)容，表示一級(jí)標(biāo)題。代表重中之重，它的地位在頁(yè)面中相當(dāng)于關(guān)鍵字。雖然html標(biāo)記理論上在一個(gè)頁(yè)面中可以出現(xiàn)多次，但h1標(biāo)記的實(shí)際語(yǔ)義具有唯一性，如將一個(gè)網(wǎng)頁(yè)比作一篇文章，試想文章能有幾個(gè)一級(jí)標(biāo)題，故h1在一個(gè)網(wǎng)頁(yè)里最好只出現(xiàn)1次或者直接不使用。

（二）h2二級(jí)標(biāo)題

標(biāo)記中的內(nèi)容，表示次級(jí)標(biāo)題。重要性比h1稍低，它的地位相當(dāng)于頁(yè)面中的長(zhǎng)尾關(guān)鍵詞，主要用于設(shè)置文章段落標(biāo)題或欄目標(biāo)題，h2標(biāo)題在一個(gè)頁(yè)面中可以出現(xiàn)多次，與h3搭配使用。

（二）h3三級(jí)標(biāo)題

標(biāo)記中的內(nèi)容，表示三級(jí)標(biāo)題，重要性較h2要小，一般用于頁(yè)面的邊側(cè)欄，h4作為輔助。

從用戶可讀性方面考慮，頁(yè)面層級(jí)關(guān)系不能太深，一般不超過(guò)3，所以在頁(yè)面中h4,h5,h6一般出現(xiàn)機(jī)率較少，在此即不累述，其語(yǔ)義和作用可參照h2,h3標(biāo)記。

H標(biāo)簽對(duì)搜索引擎的友好性

網(wǎng)站好比一棵大樹(shù)，主干是網(wǎng)站的核心內(nèi)容，粗壯的枝杈是網(wǎng)站的各分類，枝葉是網(wǎng)站具體內(nèi)容，搜索引擎的爬蟲(chóng)就在這些樹(shù)與枝叉之間爬行，網(wǎng)站地圖（sitemap）給爬蟲(chóng)一個(gè)準(zhǔn)確的路徑，讓它能找到所有我們希望它找到的枝葉部分。在這些雜亂的內(nèi)容中，H標(biāo)簽標(biāo)識(shí)了內(nèi)容的重要層級(jí)，并指引搜索引擎爬蟲(chóng)快速有序的對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行整理。

（一）h1標(biāo)記網(wǎng)頁(yè)優(yōu)化

h1是網(wǎng)頁(yè)中比較重要的標(biāo)記，使用它標(biāo)注網(wǎng)頁(yè)的主關(guān)鍵字，提升主關(guān)鍵字的重要性。利用好h1標(biāo)記可提升網(wǎng)站的排名，它像一把鋒利的雙刃劍，不用它時(shí)你在優(yōu)化的過(guò)程中會(huì)吃虧，而濫用它你也會(huì)吃虧，所以要慎重使用。一般有以下幾種用法：

1）包含網(wǎng)頁(yè)文檔tilte中的主關(guān)鍵詞或直接放置logo文字內(nèi)容，并設(shè)置h1的display:none樣式或用特殊方法將其隱藏起來(lái)，以此對(duì)網(wǎng)頁(yè)關(guān)鍵詞進(jìn)行優(yōu)化。綜合性網(wǎng)站、公司宣傳類網(wǎng)站可以這樣來(lái)處理。

如圖2使用h1標(biāo)記優(yōu)化網(wǎng)易網(wǎng)：

html內(nèi)容：

網(wǎng)易

樣式內(nèi)容：.hidden{display:none;}

2）根據(jù)內(nèi)容的重要性對(duì)網(wǎng)站進(jìn)行優(yōu)化。最常見(jiàn)的用法即是在h1標(biāo)記內(nèi)放置頭條要聞標(biāo)題，以標(biāo)識(shí)新聞的重要性。新聞?lì)惥W(wǎng)站運(yùn)用的比較多。

例如圖3使用h1標(biāo)記優(yōu)化搜狐網(wǎng)頭條要聞：

3）傳統(tǒng)用法，使用h1標(biāo)記來(lái)定義網(wǎng)頁(yè)內(nèi)容的層次，以達(dá)到優(yōu)化的作用。新聞、資訊類網(wǎng)站的詳細(xì)內(nèi)容頁(yè)通常都會(huì)使用h1標(biāo)記來(lái)設(shè)置文章的標(biāo)題，以達(dá)到優(yōu)化的目的。

例如圖4使用h1標(biāo)記優(yōu)化DIVCSS5網(wǎng)文章標(biāo)題：

（二）h2標(biāo)記網(wǎng)頁(yè)優(yōu)化

主關(guān)鍵字的優(yōu)化對(duì)于網(wǎng)站十分重要，在使用h1標(biāo)記對(duì)主關(guān)鍵字進(jìn)行優(yōu)化以后，我們需要進(jìn)行關(guān)鍵詞疊加優(yōu)化，即運(yùn)用h2標(biāo)記將網(wǎng)頁(yè)中出現(xiàn)的一些關(guān)鍵詞進(jìn)行標(biāo)注，達(dá)到增加關(guān)鍵詞密度的目的。

1）網(wǎng)站首頁(yè)的主體欄目標(biāo)題包含了許多與關(guān)鍵詞相關(guān)的重要詞語(yǔ)，有的是行業(yè)關(guān)鍵詞，有的是品牌關(guān)鍵詞，運(yùn)用h2標(biāo)記可對(duì)網(wǎng)站首頁(yè)主要欄目標(biāo)題進(jìn)行優(yōu)化。

例如圖5使用h2標(biāo)記優(yōu)化慧聰網(wǎng)首頁(yè)主欄目標(biāo)題：

2)對(duì)于大中型網(wǎng)站，長(zhǎng)尾關(guān)鍵詞帶來(lái)的流量不容忽視，運(yùn)用h2標(biāo)記可對(duì)長(zhǎng)尾關(guān)鍵詞進(jìn)行優(yōu)化。

如圖6使用h2標(biāo)記優(yōu)化農(nóng)信通網(wǎng)的長(zhǎng)尾關(guān)鍵詞：

例如圖7使用h2標(biāo)記優(yōu)化新華網(wǎng)時(shí)政頁(yè)長(zhǎng)尾關(guān)鍵詞：

（三）h3標(biāo)記網(wǎng)頁(yè)優(yōu)化

h3標(biāo)記一般結(jié)合h2標(biāo)記使用，主要用于設(shè)置頁(yè)面的次級(jí)要聞的文章標(biāo)題和側(cè)邊欄目標(biāo)題上。若是三列結(jié)構(gòu)或二列結(jié)構(gòu)布局的網(wǎng)頁(yè)，h3一般出現(xiàn)在兩側(cè)邊欄或較窄欄目標(biāo)題上，以達(dá)到優(yōu)化長(zhǎng)尾關(guān)鍵詞的作用。

h4,h5,h6在網(wǎng)站的優(yōu)化中，使用頻率比較小，用法可參照h2、h3標(biāo)記，但要注意層次，并且出現(xiàn)的H標(biāo)簽的序號(hào)必須連續(xù)，不可跳躍使用。

總結(jié)

H標(biāo)簽是頁(yè)面內(nèi)容比較重要的標(biāo)記之一，用好此系列標(biāo)記，設(shè)計(jì)出來(lái)的網(wǎng)站層次清晰，結(jié)構(gòu)明確，若布局再進(jìn)行美學(xué)上的處理，那么網(wǎng)站不僅有利于搜索引擎理解，也利于用戶閱讀。標(biāo)記在理論上是可以任意重復(fù)使用，但千萬(wàn)要理解每一個(gè)標(biāo)記的語(yǔ)義，恰當(dāng)選擇合適的標(biāo)記進(jìn)行內(nèi)容設(shè)計(jì)，你的網(wǎng)站將會(huì)讓搜索更加喜歡，同時(shí)也能獲得一個(gè)不錯(cuò)的排名。

（作者單位：云南工商學(xué)院軟件學(xué)院）