在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à)面的代碼:
<body> <h1>一(yī)級标題</h1> <p>段落</p> <div> <h2>二級标題</h2> <p>...</p> <div> <h3>三級标題</h3> <p>...</p> <div> <h4>四級标題</h4> <p>...</p> </div> </div> </div> </body> |
浏覽器(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ī)般出現較少。