在html裡的每一個標簽都有其自身的意義,而H標簽作為標題標簽,它的意義更是至關重要。對於H標簽的用法特別是h1的用法一直是個爭議的問題,也是值得我們研究的問題。我在總結瞭前人經驗的基礎上結合自己對H標簽的理解,寫下瞭這篇文章,希望對大傢有所幫助。
什麼是H標簽?
W3C指出h1-h6標簽可定義標題。h1定義最大的標題。h6定義最小的標題。
h1,h2,h3,h4,h5,h6,作為標題標簽,並且依據重要性遞減。我認為遵循這樣的原則是很有必要的,它能讓頁面的層級關系更清楚,讓搜索引擎更好地抓取和分析出頁面的主題內容等等。為瞭更好的理解,請看下面的代碼:
<body> <h1>一級標題</h1> <p>段落</p> <div> <h2>二級標題</h2> <p>…</p> <div> <h3>三級標題</h3> <p>…</p> <div> <h4>四級標題</h4> <p>…</p> </div> </div> </div> </body> |
瀏覽器的默認樣式也是依據重要性遞減,字號從h1到h6由大變小。而不同的瀏覽器中的樣式又有一些差別,介於這種差別,我們通常在佈局中用CSS將其統一。
大傢怎麼用的?
現在很多網站(包括淘寶、新浪、搜狐等知名網站),都喜歡把h1用在LOGO上, 如圖:
大傢都這樣用,不無道理,其實優點蠻多的:它概括瞭整個頁面的內容,而且LOGO離body很近,這樣就方便瞭搜索引擎最快的抓取主題,再者從語義來說也更加精準。
當然也不是全部網站都將h1用在LOGO上,網易的用法就是比較特別的例子:
網易將h1設置瞭display:none樣式,使其隱藏起來,這樣既解決瞭h1不知道放哪裡的矛盾又起到瞭SEO優化的作用,可謂一箭雙雕。
而騰訊首頁的h1則是頭條新聞,如圖:
從上面的例子可以看到各大網站對於h1的用法都有所不同,對於h1放哪裡?一直是一個爭議的問題,但我認為到底放哪裡沒有絕對的答案。我認為應該根據網頁的定位、類型、用戶搜索習慣等因素綜合考慮。比如新聞類的網站,可以把h1放在頭條新聞上;綜合門戶類的網站,那就把h1放在LOGO上吧;如果公司網站也可以把h1放在LOGO上,因為用戶搜索公司一般喜歡搜公司的名稱;如果有網站宣傳語,還可以把h1放在宣傳語上,這也是不錯的選擇。總之,選擇一種最適合的才是最好的。