每日 30 秒 ⏱ H1 の 小祕密

簡介

heading 標籤、SEO、無障礙閱讀

ps: 內容有點多，原本只想講一個點，可是關聯性太強了，因此辛苦你們了。

在學習 HTML 標籤的時候，不少教程只告訴你 怎麼用 而沒有講清楚 是什麼，讓咱們一塊兒從 h1 到 h6 開始從新認識 HTML 標籤完善知識體系。

觀其形

Heading 標籤 指的就是網頁中的 h1 到 h6 標籤，不少同窗最基本的認知就是 h1 到 h6 標籤字體從大到小。那你有想過既然只是從大到小，那爲何不直接使用 <h style="font-size:32px"> 這樣的表現形式呢？

愛思考的同窗會說：「多是爲了方便使用吧？」

乍一聽好像挺有道理的，可是翻閱超多網站都使用的 bootstrap 源碼 scss/_type.scss 會看到在 3到26 行 對標題從新定義了樣式：

//
// Headings
//

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-bottom: $headings-margin-bottom;
  font-family: $headings-font-family;
  font-weight: $headings-font-weight;
  line-height: $headings-line-height;
  color: $headings-color;
}

h1, .h1 { @include font-size($h1-font-size); }
h2, .h2 { @include font-size($h2-font-size); }
h3, .h3 { @include font-size($h3-font-size); }
h4, .h4 { @include font-size($h4-font-size); }
h5, .h5 { @include font-size($h5-font-size); }
h6, .h6 { @include font-size($h6-font-size); }

.lead {
  @include font-size($lead-font-size);
  font-weight: $lead-font-weight;
}
複製代碼

在這段 scss 代碼中，能夠看到除了對 h1 到 h6 被從新定義外，還定義了對應的 .h1 到 .h6 類樣式。這下帶來了新的問題：

• 開發中常常會重置 Heading 標籤 樣式，那瀏覽器定義的默認樣式豈不是畫蛇添足？
• 只是爲了方便使用，那 boostrap 還要再定義對應的 .h1 到 .h6 類樣式？

知其意

在 1991 年，蒂姆·伯納斯·李首次提出 HTML 的時候，並無給頁面添加樣式的方法。如何顯示頁面是由瀏覽器決定的，用戶也能夠經過偏好設置來修改。這就比如如今最常用的 markdown 同樣，使用同樣的語法可是根據不一樣的設置，能夠展現不同的字體。

在報紙排版中每每會把頭條內容加大字號表示重點，並經過其餘小字號和頁面排版來組織內容結構。

那面對密密麻麻沒樣式的網頁時該怎麼區分頁面結構呢？參考報紙能夠利用 Heading 標籤 來組裝頁面形式，經過 Heading 標籤 能夠很方便的知道整個頁面的結構：

• h1 用來修飾網頁的主標題，通常是網頁的標題，文章標題。
• h2 表示一個段落的標題，或者說副標題。
• h3 表示段落的小節標題。
• h4 到 h6 表示一些不重要的內容，用來作結構區分。

另一個形象的例子就是 markdown 中的 # ~ ##### 表示標題，咱們甚至能夠只看 markdown 不須要頁面渲染就能讀懂文章。這也是 markdown 設計的初衷：方便書寫和閱讀。

經過 Heading 標籤 瀏覽器能夠很容易的讀出整個頁面的主題結構，甚至能夠生成目錄方便用戶閱讀，在沒有樣式的時候仍是至關有用的，固然隨着 CSS 的誕生頁面樣式能夠更好的組織，不少同窗也就忘記了它的本意。

小練習：遍歷 dom 節點經過 Heading 標籤來生成一個網頁目錄。

小蜘蛛

廉頗老矣，尚能飯否。

如今不少同窗都是使用 <div> 和 <span> 來組織頁面結構，已經不去在乎 Heading 標籤 帶來的意義了。除了 Heading 標籤 在 HTML5 也帶來了更多語義化的標籤，來幫助咱們組織頁面結構。

在 SEO （搜索引擎優化）時，小蜘蛛 爬取頁面結構時仍是會用到這些語義化和結構 來了解頁面信息。畢竟小蜘蛛並非人能讀懂頁面，它們只能按照既定的規則來讀取。打開掘金的一篇文章小姐姐的誘惑，控制檯選擇文章標題 便能看到使用的是 h1 標籤：

經過 h1 組織頁面結構告訴 小蜘蛛 這個頁面的標題是什麼，小蜘蛛也會把這個存儲起來，當在搜索引擎搜索 小姐姐的誘惑 等相關詞語時，就能找到這篇文章啦。固然在頁面右側變是文章目錄：

是否是很是方便咱們查看文章結構，進行內容的跳轉呢？

SEO 指的是搜索引擎優化，簡單來說就是怎麼讓 百度 和 谷歌 更容易理解你的網站並對齊進行排序。

特殊羣體

除了小蜘蛛外使用 Heading 標籤 還能方便特殊羣體，最著名的人之一即是 霍金 大大了。霍金 大大隻有兩個手指頭，若是他要瀏覽網頁該怎麼辦呢？

其實如今有不少幫助特殊羣體的軟件，例如瀏覽器中的無障礙模式。這些軟件經過解析頁面的結構來幫組特殊羣體用戶來操做頁面。例如列出頁面目錄方便特殊羣體用戶選擇，讀出頁面目錄幫助 視力障礙人士 方便選着和使用網頁。

若是你們都一味的使用 <div> 和 <span> 特殊羣體用戶只能一個個 dom 節點聽過去了，你們感興趣能夠打開無障礙模式試試看。iPhone 用戶最經常使用的 輔助控制器 實際上是設計給特殊羣體使用的：

能夠看到 自定義 中能夠模擬 縮放 和 三維粗觸控 等操做，這樣像霍金大大也可使用iPhone進行縮放等特殊操做了，送上一句霍金大大的名言：

永恆是很長的時間，特別是對盡頭而言。 --by 霍金（此次不是魯迅了）

填坑

如今解決了爲何使用 Heading 標籤，那爲何 bootstrap 中還定義了 .h1 到 .h6 標籤呢？其實問題的答案已經很明瞭：

• 真真正正的在使用字體樣式。
• 不破壞 Heading 標籤 的語義，使得形成誤解。

但願

若是你們在開發的時候不是隻面向企業或者 本身使用，但願你們能儘可能使用 Heading 標籤 和 語義化標籤，除了能帶來 SEO 上的幫助還能幫助特殊羣體 何樂而不爲呢？

SEO 相關內容

• H1 の 小祕密
• SEO 初體驗
• img の 小九九
• 千裏姻緣一線牽
• 投懷送抱
• 漫遊器法則

一塊兒成長

在困惑的城市裏總少不了並肩同行的 夥伴 讓咱們一塊兒成長。

• 若是您想讓更多人看到文章能夠點個 點贊。
• 若是您想激勵小二能夠到 Github 給個 小星星。
• 若是您想與小二更多交流添加微信 m353839115。

本文原稿來自 PushMeTop