在html裡(lǐ)的每一(yī)個(gè)标簽都有其自(zì)身的意義，而H标簽作為(wèi)标題标簽，它的意義更是至關重要。對于H标簽的用法特别是h1的用法一(yī)直是個(gè)争議的問題，也是值得我們研究的問題。我在總結了前人經驗的基礎上(shàng)結合自(zì)己對H标簽的理解，寫下(xià)了這篇文章，希望對大家有所幫助。

什麽是H标簽？

W3C指出h1-h6标簽可定義标題。h1定義最大的标題。h6定義最小(xiǎo)的标題。

h1，h2，h3，h4，h5，h6，作為(wèi)标題标簽，并且依據重要性遞減。我認為(wèi)遵循這樣的原則是很有必要的，它能(néng)讓頁面的層級關系更清楚，讓搜索引擎更好地抓取和分析出頁面的主題内容等等。為(wèi)了更好的理解，請看(kàn)下(xià)面的代碼：

浏覽器(qì)的默認樣式也是依據重要性遞減，字号從(cóng)h1到(dào)h6由大變小(xiǎo)。而不同的浏覽器(qì)中的樣式又(yòu)有一(yī)些差别，介于這種差别，我們通(tōng)常在布局中用CSS将其統一(yī)。

大家怎麽用的？

現在很多(duō)網站（包括淘寶、新浪、搜狐等知名網站），都喜歡把h1用在LOGO上(shàng)， 如圖：

大家都這樣用，不無道理，其實優點蠻多(duō)的：它概括了整個(gè)頁面的内容，而且LOGO離body很近，這樣就(jiù)方便了搜索引擎最快的抓取主題，再者從(cóng)語義來說也更加精準。

當然也不是全部網站都将h1用在LOGO上(shàng)，網易的用法就(jiù)是比較特别的例子：

網易将h1設置了display:none樣式，使其隐藏起來，這樣既解決了h1不知道放(fàng)哪裡(lǐ)的矛盾又(yòu)起到(dào)了SEO優化的作用，可謂一(yī)箭雙雕。

而騰訊首頁的h1則是頭條新聞，如圖：

從(cóng)上(shàng)面的例子可以看(kàn)到(dào)各大網站對于h1的用法都有所不同，對于h1放(fàng)哪裡(lǐ)？一(yī)直是一(yī)個(gè)争議的問題，但我認為(wèi)到(dào)底放(fàng)哪裡(lǐ)沒有絕對的答案。我認為(wèi)應該根據網頁的定位、類型、用戶搜索習慣等因素綜合考慮。比如新聞類的網站，可以把h1放(fàng)在頭條新聞上(shàng)；綜合門(mén)戶類的網站，那就(jiù)把h1放(fàng)在LOGO上(shàng)吧(ba)；如果公司網站也可以把h1放(fàng)在LOGO上(shàng)，因為(wèi)用戶搜索公司一(yī)般喜歡搜公司的名稱；如果有網站宣傳語，還(hái)可以把h1放(fàng)在宣傳語上(shàng)，這也是不錯(cuò)的選擇。總之，選擇一(yī)種最适合的才是最好的。

關于h2我一(yī)般喜歡把它用在首頁的大欄目上(shàng)，如圖：

内容頁，我更習慣把h2讓給文章标題，欄目标題則用h3表示，如圖：

h3多(duō)用于欄目标題，如圖：

農信通(tōng)産品首頁用到(dào)的H标簽，不僅有清晰的層級關系，而且突出了産品内容的重要性，對搜索引擎來說也非常有利。

下(xià)面這個(gè)例子也很有意思，如圖：

欄目标題用了h2，新聞标題則用了h1，如果依照(zhào)層級關系來說，它們的順序颠倒了，但它并沒有錯(cuò)，在實際運用H标簽的時候，我們也可以根據内容的重要性來定義。所以隻有在掌握好基礎理論的基礎上(shàng)靈活的運用，才能(néng)把它的作用最大化。

從(cóng)上(shàng)面的幾個(gè)例子中不難看(kàn)出H标簽的用法是很靈活的，并不是局限在這幾種用法以内，我們在運用中隻要遵循依據重要性遞減的原則，舉一(yī)反三，h4-h6亦是如此。

總結了一(yī)些些

根據參考資料、前端制作牛人、知名網站等對H标簽的理解和運用，我總結了以下(xià)規範，希望能(néng)帶給大家一(yī)些參考價值。

h1一(yī)級标題

代表重中之重，它的地位在頁面中跟關鍵字的地位一(yī)樣重要。一(yī)般運用于網站标題或者頭條新聞上(shàng)，一(yī)些大型網站也運用在LOGO上(shàng)，雖然h1代碼可以寫多(duō)個(gè)，但實際語義上(shàng)有唯一(yī)性，h1标題在一(yī)個(gè)頁面裡(lǐ)面最好隻出現1次或者沒有。

h2二級标題

主要出現在頁面的主體内容的文章标題和欄目标題上(shàng)，三列結構一(yī)般在中間，二列結構一(yī)般在重要的一(yī)邊。可與h3搭配使用。

h3三級标題

一(yī)般主打頁面的邊側欄。h4是它的輔助，出現頻率不高(gāo)。

頁面層級關系不能(néng)太深，所以h4，h5，h6一(yī)般出現較少。