每日 30 秒 ? H1 の小秘密

blastz 發布于2019-08-23 16:42 / 1290人閱讀

簡介

heading 標簽、SEO、無障礙閱讀

ps: 內容有點多，本來只想講一個點，但是關聯性太強了，所以辛苦大家了。

在學習 HTML 標簽的時候，很多教程只告訴你 怎么用 而沒有講清楚 是什么，讓我們一起從 h1 到 h6 開始重新認識 HTML 標簽完善知識體系。

觀其形

Heading 標簽 指的就是網頁中的 h1 到 h6 標簽，很多同學最基本的認知就是 h1 到 h6 標簽字體從大到小。那你有想過既然只是從大到小，那為什么不直接使用這樣的表現形式呢？

愛思考的同學會說：“可能是為了方便使用吧？”

乍一聽好像挺有道理的，但是翻閱超多網站都使用的 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 標簽來生成一個網頁目錄。

小蜘蛛

廉頗老矣，尚能飯否。

現在很多同學都是使用

和來組織頁面結構，已經不去在意 Heading 標簽 帶來的意義了。除了 Heading 標簽 在 HTML5 也帶來了更多語義化的標簽，來幫助我們組織頁面結構。

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

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

是不是非常方便我們查看文章結構，進行內容的跳轉呢？

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

特殊群體

除了小蜘蛛外使用 Heading 標簽 還能方便特殊群體，最著名的人之一便是霍金大大了。霍金大大只有兩個手指頭，如果他要瀏覽網頁該怎么辦呢？

其實現在有很多幫助特殊群體的軟件，例如瀏覽器中的無障礙模式。這些軟件通過解析頁面的結構來幫組特殊群體用戶來操作頁面。例如列出頁面目錄方便特殊群體用戶選擇，讀出頁面目錄幫助視力障礙人士方便選著和使用網頁。

如果大家都一味的使用

和特殊群體用戶只能一個個 dom 節點聽過去了，大家感興趣可以打開無障礙模式試試看。iPhone 用戶最常用的 輔助控制器 其實是設計給特殊群體使用的：

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

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

填坑

現在解決了為什么使用 Heading 標簽，那為什么 bootstrap 中還定義了 .h1 到 .h6 標簽呢？其實問題的答案已經很明了：

真真正正的在使用字體樣式。

不破壞 Heading 標簽 的語義，使得造成誤解。

希望

如果大家在開發的時候不是只面向企業或者 自己使用，希望大家能盡量使用 Heading 標簽 和 語義化標簽，除了能帶來 SEO 上的幫助還能幫助特殊群體 何樂而不為呢？

SEO 相關內容

H1 の小秘密

SEO 初體驗

img の小九九

千里姻緣一線牽

一起成長

在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長。

如果您想讓更多人看到文章可以點個點贊。

如果您想激勵小二可以到 Github 給個 小星星。

如果您想與小二更多交流添加微信 m353839115。

本文原稿來自 PushMeTop

云服務器 GPU云服務器云服務器開機要開30秒秘密武器沒有秘密長不大秘密的爬蟲類

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103169.html

每日 30 秒 ? img の小九九

showImg(https://raw.githubusercontent.com/pushmetop/resource/master/30-seconds-for-everyday/img-tag/poster.png); 簡介 SEO、跨域、無障礙閱讀、事件、圖片標簽小九九最直接的聯想便是九九乘法表，但是小九九也用在形容一個人在心里打著算盤小主意和小秘密。小秘密已經被 H1 の...

lolomaco 2019-08-23 16:45 評論0 收藏0
每日 30 秒 ? SEO初體驗

showImg(https://segmentfault.com/img/remote/1460000018760855?w=900&h=500); 簡介 SEO、Meta、搜索引擎優化、簡單教程細心的同學可能發現了開頭出現了關鍵字，這是為什么呢？閱讀完本文后大家就會明白了。同學們有沒有想過互聯網上用戶、網站有多少呢？這里提供一個網站 internet live stats 里面實時的給出了...

fai1017 2019-08-02 16:11 評論0 收藏0
每日 30 秒 ? SEO初體驗

showImg(https://segmentfault.com/img/remote/1460000018760855?w=900&h=500); 簡介 SEO、Meta、搜索引擎優化、簡單教程細心的同學可能發現了開頭出現了關鍵字，這是為什么呢？閱讀完本文后大家就會明白了。同學們有沒有想過互聯網上用戶、網站有多少呢？這里提供一個網站 internet live stats 里面實時的給出了...

luodongseu 2019-08-23 16:44 評論0 收藏0
每日 30 秒 ? 投懷送抱

showImg(https://segmentfault.com/img/remote/1460000018808058?w=900&h=500); 簡介 SEO、sitemap、搜索引擎優化、簡單教程在曖昧期和暗戀期時心里總是懸掛著： ta 為什么還不和我表白？ ta 是不是對我沒感覺？ ta 是不是只是把我當備胎？ ta 是不是對誰都這樣？解決問題最簡單的方式就是直接問問對方...

kevin 2019-08-23 16:50 評論0 收藏0
每日 30 秒 ? 漫游器法則

showImg(https://segmentfault.com/img/remote/1460000018825131); 簡介 SEO、robot.txt、搜索引擎優化在浩海的互聯網世界中：互聯網宛如宇宙站點宛如星系網頁宛如星球網頁內容宛如生靈萬物而在互聯網世界漫游的搜索引擎爬蟲小蜘蛛，就好比一搜穿梭在宇宙里的星際漫游器，想想是不是還挺浪漫的。對于不同的星系有著...

Render 2019-08-23 16:51 評論0 收藏0