每日 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