本節書摘來自異步社群《web前端開發精品課 html與css進階教程》一書中的第2章，第2.2節，作者： 莫振傑 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
h1～h6是标題标簽，h表示“header”。h1～h6在html語義化中占有極其重要的地位。h1～h6按照标題的重要性依次遞減，其中h1重要性最高，h6重要性最低。
相對于其他語義化标簽，h1～h6在搜尋引擎優化（即seo）中占有相當重要的地位。在一個頁面中，h1～h6這6個标簽，我們不需要全部都用上，都是根據需要才用的。對于h1～h6，一般情況下我們隻會用到h1、h2、h3和h4，很少再會去用h5和h6，因為一個頁面不可能用到那麼多級的标題。并且從搜尋引擎優化的角度來說，h1、h2、h3和h4這4個标簽會被賦予一定的權重，而h5和h6的權重跟普通标簽差不多，在seo優化上意義不大。
對于标題h1～h6的語義化，我們需要注意以下四個方面。
（1）一個頁面隻能有一個h1标簽。
（2）h1～h6之間不要斷層。
（3）不要用h1～h6來定義樣式。
（4）不要用div來代替h1～h6。
1．一個頁面隻能有一個h1标簽
h1标簽表示每個頁面中最高層級的标題，搜尋引擎會賦予h1标簽最高權重。雖然w3c沒有明确規定一個頁面不能有多個h1标簽，但是我們還是推薦“一個頁面一個h1标簽”的做法。如果一個頁面出現多個h1，對搜尋引擎可能不好，也可能會被判以作弊。就像你寫文章一樣，一個頁面就等于一篇文章，你見過一篇文章有多個主标題的麼？
2．h1～h6之間不要出現斷層
搜尋引擎對h1～h6标簽比較敏感，尤其是h1和h2。一個語義良好的頁面，h1～h6應該是完整有序而沒有出現斷層的。也就是說，要按照“h1、h2、h3、h4”這樣的順序依次排列下來，不要出現“h1、h3、h4”而漏掉h2的情況。
3．不要用h1～h6來定義樣式
我們都知道h1～h6是有預設樣式的，如圖2-1所示。在實際開發中，很多時候我們需要為文本定義字型加粗或者字型大小。有些人喜歡用h1～h6來代替css，使用标簽來控制樣式，這是一種非常不好的做法。我們一定要記住，html關注的是結構（語義），css關注的是樣式，結構跟樣式應該分離。
4．不要用div來代替h1～h6
從語義上來說，一個頁面的标題應該使用h1～h6标簽，不要使用div來代替。
舉例：
在浏覽器預覽效果如圖2-3所示。
分析：
div是無語義的标簽，如果使用div來代替h1～h6，後期維護比較困難，而且對seo影響也非常大。因為這種做法會讓一個頁面丢失大量的權重。