楊勇

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

概述

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

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

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

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

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

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

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

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

H標(biāo)簽也叫heading標(biāo)簽，屬于塊級標(biāo)記。一般情況下一個H標(biāo)記獨(dú)占網(wǎng)頁的一塊區(qū)域。H標(biāo)簽共有六對標(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)簽的用法

-

的具體用法如下：

這是一級標(biāo)題

這是二級標(biāo)題

這是三級標(biāo)題

這是四級標(biāo)題

這是五級標(biāo)題

這是六級標(biāo)題

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

H標(biāo)簽的語義

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

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

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

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

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

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

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

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

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

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

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

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

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

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

html內(nèi)容：

網(wǎng)易

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

總結(jié)

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

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