楊勇

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

概述

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

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

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

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

把握H標簽使用時機

運用H標簽優(yōu)化站點的方法

如何使用H標簽

（一）H標簽的定義

H標簽也叫heading標簽，屬于塊級標記。一般情況下一個H標記獨占網(wǎng)頁的一塊區(qū)域。H標簽共有六對標記，

到

。H標簽用于定義標題。

定義最大的標題。

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

（二）H標簽的用法

-

的具體用法如下：

這是一級標題

這是二級標題

這是三級標題

這是四級標題

這是五級標題

這是六級標題

默認運行效果如圖1：

H標簽的語義

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

（一）h1一級標題

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

（二）h2二級標題

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

（二）h3三級標題

標記中的內容，表示三級標題，重要性較h2要小，一般用于頁面的邊側欄，h4作為輔助。

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

H標簽對搜索引擎的友好性

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

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

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

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

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

html內容：

網(wǎng)易

樣式內容：.hidden{display:none;}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

總結

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

（作者單位：云南工商學院軟件學院）