對(duì)于H標(biāo)簽的用法特別是h1的用法一直是個(gè)爭(zhēng)議的問(wèn)題，也是值得我們研究的問(wèn)題。我在總結(jié)了前人經(jīng)驗(yàn)的基礎(chǔ)上結(jié)合自己對(duì)H標(biāo)簽的理解，寫(xiě)下了這篇文章，希望對(duì)大家有所幫助。
什么是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)簽，并且依據(jù)重要性遞減。我認(rèn)為遵循這樣的原則是很有必要的，它能讓頁(yè)面的層級(jí)關(guān)系更清楚，讓搜索引擎更好地抓取和分析出頁(yè)面的主題內(nèi)容等等。為了更好的理解，請(qǐng)看下面的代碼：
<body>
<h1>一級(jí)標(biāo)題</h1>
<p>段落</p>
<div>
<h2>二級(jí)標(biāo)題</h2>
<p>...</p>
<div>
<h3>三級(jí)標(biāo)題</h3>
<p>...</p>
<div>
<h4>四級(jí)標(biāo)題</h4>
<p>...</p>
</div>
</div>
</div>
</body>
瀏覽器的默認(rèn)樣式也是依據(jù)重要性遞減，字號(hào)從h1到h6由大變小。而不同的瀏覽器中的樣式又有一些差別，介于這種差別，我們通常在布局中用CSS將其統(tǒng)一。
大家怎么用的？
現(xiàn)在很多網(wǎng)站（包括淘寶、新浪、搜狐等知名網(wǎng)站），都喜歡把h1用在LOGO上， 如圖：
大家都這樣用，不無(wú)道理，其實(shí)優(yōu)點(diǎn)蠻多的：它概括了整個(gè)頁(yè)面的內(nèi)容，而且LOGO離body很近，這樣就方便了搜索引擎最快的抓取主題，再者從語(yǔ)義來(lái)說(shuō)也更加精準(zhǔn)。
當(dāng)然也不是全部網(wǎng)站都將h1用在LOGO上,網(wǎng)易的用法就是比較特別的例子：
網(wǎng)易將h1設(shè)置了display:none樣式，使其隱藏起來(lái)，這樣既解決了h1不知道放哪里的矛盾又起到了SEO優(yōu)化的作用，可謂一箭雙雕。
而騰訊首頁(yè)的h1則是頭條新聞，如圖：
從上面的例子可以看到各大網(wǎng)站對(duì)于h1的用法都有所不同，對(duì)于h1放哪里？一直是一個(gè)爭(zhēng)議的問(wèn)題，但我認(rèn)為到底放哪里沒(méi)有絕對(duì)的答案。我認(rèn)為應(yīng)該根據(jù)網(wǎng)頁(yè)的定位、類(lèi)型、用戶(hù)搜索習(xí)慣等因素綜合考慮。比如新聞?lì)惖木W(wǎng)站，可以把h1放在頭條新聞上；綜合門(mén)戶(hù)類(lèi)的網(wǎng)站，那就把h1放在LOGO上吧；如果公司網(wǎng)站也可以把h1放在LOGO上，因?yàn)橛脩?hù)搜索公司一般喜歡搜公司的名稱(chēng)；如果有網(wǎng)站宣傳語(yǔ)，還可以把h1放在宣傳語(yǔ)上，這也是不錯(cuò)的選擇?？傊x擇一種最適合的才是最好的。
關(guān)于h2我一般喜歡把它用在首頁(yè)的大欄目上，如圖：
內(nèi)容頁(yè)，我更習(xí)慣把h2讓給文章標(biāo)題，欄目標(biāo)題則用h3表示，如圖：
h3多用于欄目標(biāo)題，如圖：
農(nóng)信通產(chǎn)品首頁(yè)用到的H標(biāo)簽，不僅有清晰的層級(jí)關(guān)系，而且突出了產(chǎn)品內(nèi)容的重要性，對(duì)搜索引擎來(lái)說(shuō)也非常有利。
下面這個(gè)例子也很有意思，如圖：
欄目標(biāo)題用了h2,新聞標(biāo)題則用了h1,如果依照層級(jí)關(guān)系來(lái)說(shuō)，它們的順序顛倒了，但它并沒(méi)有錯(cuò)，在實(shí)際運(yùn)用H標(biāo)簽的時(shí)候，我們也可以根據(jù)內(nèi)容的重要性來(lái)定義。所以只有在掌握好基礎(chǔ)理論的基礎(chǔ)上靈活的運(yùn)用，才能把它的作用最大化。
從上面的幾個(gè)例子中不難看出H標(biāo)簽的用法是很靈活的，并不是局限在這幾種用法以?xún)?nèi)，我們?cè)谶\(yùn)用中只要遵循依據(jù)重要性遞減的原則，舉一反三，h4-h6亦是如此。
總結(jié)了一些些
根據(jù)參考資料、前端制作牛人、知名網(wǎng)站等對(duì)H標(biāo)簽的理解和運(yùn)用，我總結(jié)了以下規(guī)范，希望能帶給大家一些參考價(jià)值。
h1一級(jí)標(biāo)題
代表重中之重，它的地位在頁(yè)面中跟關(guān)鍵字的地位一樣重要。一般運(yùn)用于網(wǎng)站標(biāo)題或者頭條新聞上，一些大型網(wǎng)站也運(yùn)用在LOGO上，雖然h1代碼可以寫(xiě)多個(gè)，但實(shí)際語(yǔ)義上有唯一性，h1標(biāo)題在一個(gè)頁(yè)面里面最好只出現(xiàn)1次或者沒(méi)有。
h2二級(jí)標(biāo)題
主要出現(xiàn)在頁(yè)面的主體內(nèi)容的文章標(biāo)題和欄目標(biāo)題上，三列結(jié)構(gòu)一般在中間，二列結(jié)構(gòu)一般在重要的一邊?？膳ch3搭配使用。
h3三級(jí)標(biāo)題
一般主打頁(yè)面的邊側(cè)欄。h4是它的輔助，出現(xiàn)頻率不高。
頁(yè)面層級(jí)關(guān)系不能太深，所以h4,h5,h6一般出現(xiàn)較少。
