写好 HTML 不仅有标签语义化

前言

随着近两年组件化 JS 框架的流行，你们对于 HTML 自己的关注度些许有些下降。HTML 容易被人忽视但并不表明它不重要。一个网页，能够没有 JS 也能够没有 CSS 可是必定不能没有 HTML（固然可能还有其它的标记语言）。

在我看来写好 HTML 远远不止标签语义化这么简单。想要知道一个网站的 HTML 写的好很差，你只须要用 chrome 浏览器将其 CSS 和 JS 都删除掉，留下的部分若是依然逻辑清晰，主次分明，那就算写的不错的HTML了。

这边总结了几个写 HTML 的思路提供给你们参考。

1. 写 HTML 以前必定要理清楚网页的大纲，分清楚主次；
2. 写好 HTML 应该暂时摒弃设计稿；
3. 写好 HTML 应该暂时摒弃技术的实现难度；
4. 写好 HTML 应该考虑更多无障碍的细节；
5. 写好 HTML 不是一步登天的，不断调整和迭代的过程；
6. HTML 容易被人忽视，但并不表明它不重要；

这是示例网页，为了展现切成了左右两块。为了减小篇幅，省略了 Trailers 下的模块。

1、大纲

其实写 HTML 和写做文是同样同样的。老师告诉咱们，拿到做文的第一步不是立刻就开始写，而是先审题。

拿到设计稿的第一步，咱们也不要着急开始写 HTML。应该先搞清楚网页的中心思想，分析一下整个网页的大纲。

能够看到，该网页主要的中心思想就是 what‘s next，而后紧接着是一个四级的主次层级。也就说咱们这个网页的大纲层级达到了五级。而五级能够反应出这个网页的层级实际是偏深的。

一般来讲，一个移动页面的层级，不建议超过 3 层。页面的层级越复杂，用户理解成本就会越高，体验就会相应的越差。对于开发来讲，层级越复杂表明着业务逻辑越复杂，也就是你会写更多复杂的代码。

此时，这个大纲会是一个你能够反驳设计和产品的有力证据。

这里特别须要提到的点是。一开始我认为 Readers’ choice last week 下面是一个书籍列表。当我梳理大纲以后，我发现 Readers’ choice last week 和 Stories in Queue 其实都有 Female lead 和 Male lead 这个二级的关系。

只是在这里设计同窗用了两种设计方式，一个把这个标题放到了外面，一个把这个标题放到了模块内部。比较容易让人忽略掉这层逻辑关系。

因此梳理大纲还能帮助咱们理清楚网页的结构和层级，看到设计背后更深层的东西。

2、标签的隐藏

基本上梳理完大纲，咱们 HTML 的大致结构也就出来了。惊喜的是，咱们甚至能直接经过浏览器默认的样式识别出文档内容的层级。

在这里并无使用 h1 做为大纲的第一个层级，由于一般 h1 是咱们网站 LOGO 和 HOME 连接的保留标签。

能够看到 h2 和 h3 这个层级的标签在咱们的视觉上是没有呈现的，那咱们要怎么办呢？视觉上没有呈现，就用视觉上的方式将其隐藏就好。

.hidden{
    position:absolute;
    clip:rect(0,0,0,0);
}
复制代码

这里不太建议使用 display：none； 来隐藏咱们的元素。由于有可能标题须要被锚点捕捉到（好比这里的nav导航能够锚点到咱们的 h3 的标题）。若是采用display:none; 的话这个逻辑就失效了。

3、标签语义化

标签语义化，个人思路是，它是什么就用什么标签。而不是它长得像什么就用什么标签。简单的说，不是看到加粗你就要用 strong，而是由于它语气更强须要被强调才使用strong。

strong: 把文本定义为语气更强的强调的内容 --w3school。

通常来讲，一个网页元素的优先级是按照 F 阵型排列的。也就是说，左边比右边的重要，上面的比下面的优先级高（不过设计同窗每每会用一些设计手法略微打破这个规则，但大致是这样）。

在这个模块里面，基于以前但大纲，咱们能够知道 female lead 的权重是比书名的权重高的，虽然它看起来比书名的字体小。因此这里我选择的是 h5 和 h6。

基于位置咱们能够认为分类 fatasy 是比后面两个数字的权重要高的，因此这里我依次选用了 <strong> 和 <em>。一开始后面两个数字我是想用 <small> 标签的，由于它俩看起来是在是太像 <small>了。可是去看了一下定义发现 <tt> <i> <b> <big> <small> 这几个标签都只是为了文字样式定义的，并不具备权重的定义。这就再一次论证了，以前提到的不要由于它看起来像某个标签而去选择对应的标签。而应该脱离设计稿，基于文档的权重去考虑。

哪些状况咱们能够用这几个服务于文字样式的标签呢？好比一些装饰性的小图标，或这不具备权重的文本...这里能够看到我用 <i> 做为了数字前小图标的标签。固然若是你的图标选择的是 svg 的方案，那这里用 <svg> 则更适合。

4、无障碍访问

由于咱们本身开发网页，本身也使用网页。因此每每会有一种全部人都和咱们同样的错觉。其实无障碍的范畴是很是的广的。远远不仅是阅读网页有障碍的弱势群体。他们有多是网络环境差的人，也有多是暂时找不到鼠标，或者键盘失灵的朋友，也有多是扫描你网页的网络爬虫...

对于无障碍访问，足以开一个新的文章来说。本身经验也尚欠火候，这里只提一下几个本身知道的细节。

能够我在闪电图标内部放了一个实际看不见的文案 total votes 用于表示这个数字的意义。固然你能够用超高的 line-height，或者负的 text-indent 加上 overflow:hidden 来隐藏元素。

这样作的好处是，可让屏幕阅读器读到这里的时候，告知用户这个数字的含义。也能够利于搜索引擎知道这个数字的意义，也能够在 css 文件加载失败的时候让用户看到这段文字。

固然若是你这里使用的是 svg 图标，没法添加文字，那这边建议是在<em> 上添加 aria-label="total votes" 来实现相似的逻辑。

还看到我在这个元素的最后添加了隐藏的 <a> 连接做为元素的跳转逻辑。而不是用一个 <a> 包裹着整个模块。

首先用一个<a> 包裹着整个模块，是实现这个模块整个点击最简单的方式。可是这里我想说的是，和以前不能束缚于设计稿同样，想要写好 HTML 也尽可能不要束缚于技术实现。它是什么就用什么标签，而不是咱们怎么实现简单就用什么。

不过这里举的例子里面恰好有一个操做 vote 按钮。这个最简单的方案直接会产生 <a><button/></a> 这种不符合 W3C 规范的嵌套结构。因此再次证实这种看似简单的结构的拓展性也是比较差的。

因此这里我推荐使用这种在最后建立 幽灵遮罩 连接的方式来解决以上全部的问题。更多技术实现能够查看这片文章 从掘金首页列表一个小 Bug 提及。

结尾

这里再放一下文中反复提到但几个我的观点。

1. 写 HTML 以前必定要理清楚网页的大纲，分清楚主次；
2. 写好 HTML 应该暂时摒弃设计稿；
3. 写好 HTML 应该暂时摒弃技术的实现难度；
4. 写好 HTML 应该考虑更多无障碍的细节；
5. 写好 HTML 不是一步登天的，不断调整和迭代的过程；
6. HTML 容易被人忽视，但并不表明它不重要；

和全部技术同样，想要写好 HTML 就要花更多的时间，去考虑更多细致上的问题。 可是我也不得不认可咱们老是会把时间分配给那些看起来对于项目上更重要的事情。因此这里只是提供一些本身总结的写好 HTML 的几个思路，具体实际的时候仍是须要本身去斟酌。

这边再安利一个能够帮助你们，写好 HTML 的纯 CSS 即插即用的工具 @_nu/html-validator

本文纯属我的观点，有任何不足和疑问能够给我留言