前言
随着近两年组件化 JS 框架的流行，大家对于 HTML 本身的关注度些许有些降低。HTML 容易被人忽视但并不代表它不重要。一个网页，可以没有 JS 也可以没有 CSS 但是一定不能没有 HTML（当然可能还有其它的标记语言）。
在我看来写好 HTML 远远不止标签语义化这么简单。想要知道一个网站的 HTML 写的好不好，你只需要用 chrome 浏览器将其 CSS 和 JS 都删除掉，留下的部分如果依然逻辑清晰，主次分明，那就算写的不错的HTML了。
这边总结了几个写 HTML 的思路提供给大家参考。
- 写 HTML 之前一定要理清楚网页的大纲，分清楚主次；
- 写好 HTML 应该暂时摒弃设计稿；
- 写好 HTML 应该暂时摒弃技术的实现难度；
- 写好 HTML 应该考虑更多无障碍的细节；
- 写好 HTML 不是一步登天的，不断调整和迭代的过程；
- HTML 容易被人忽视，但并不代表它不重要；
这是示例网页，为了展示切成了左右两块。为了减少篇幅，省略了 Trailers 下的模块。
一、大纲
其实写 HTML 和写作文是一样一样的。老师告诉我们，拿到作文的第一步不是马上就开始写，而是先审题。
拿到设计稿的第一步，我们也不要着急开始写 HTML。应该先搞清楚网页的中心思想，分析一下整个网页的大纲。
可以看到，该网页主要的中心思想就是 what‘s next，然后紧接着是一个四级的主次层级。也就说我们这个网页的大纲层级达到了五级。而五级可以反应出这个网页的层级实际是偏深的。
通常来说，一个移动页面的层级，不建议超过 3 层。页面的层级越复杂，用户理解成本就会越高，体验就会相应的越差。对于开发来说，层级越复杂代表着业务逻辑越复杂，也就是你会写更多复杂的代码。
此时，这个大纲会是一个你可以反驳设计和产品的有力证据。
这里特别需要提到的点是。一开始我认为 Readers’ choice last week 下面是一个书籍列表。当我梳理大纲之后，我发现 Readers’ choice last week 和 Stories in Queue 其实都有 Female lead 和 Male lead 这个二级的关系。
只是在这里设计同学用了两种设计方式，一个把这个标题放到了外面，一个把这个标题放到了模块内部。比较容易让人忽略掉这层逻辑关系。
所以梳理大纲还能帮助我们理清楚网页的结构和层级，看到设计背后更深层的东西。
二、标签的隐藏
基本上梳理完大纲，我们 HTML 的大体结构也就出来了。惊喜的是，我们甚至能直接通过浏览器默认的样式识别出文档内容的层级。
在这里并没有使用 h1 作为大纲的第一个层级，因为通常 h1 是我们网站 LOGO 和 HOME 链接的保留标签。
可以看到 h2 和 h3 这个层级的标签在我们的视觉上是没有呈现的，那我们要怎么办呢？视觉上没有呈现，就用视觉上的方式将其隐藏就好。
.hidden{
position:absolute;
clip:rect(0,0,0,0);
}
这里不太建议使用 display：none； 来隐藏我们的元素。因为有可能标题需要被锚点捕捉到（比如这里的nav导航可以锚点到我们的 h3 的标题）。如果采用display:none; 的话这个逻辑就失效了。
三、标签语义化
标签语义化，我的思路是，它是什么就用什么标签。而不是它长得像什么就用什么标签。简单的说，不是看到加粗你就要用 strong，而是因为它语气更强需要被强调才使用strong。
strong: 把文本定义为语气更强的强调的内容 --w3school。
一般来说，一个网页元素的优先级是按照 F 阵型排列的。也就是说，左边比右边的重要，上面的比下面的优先级高（不过设计同学往往会用一些设计手法略微打破这个规则，但大体是这样）。
在这个模块里面，基于之前但大纲，我们可以知道 female lead 的权重是比书名的权重高的，虽然它看起来比书名的字体小。所以这里我选择的是 h5 和 h6。
基于位置我们可以认为分类 fatasy 是比后面两个数字的权重要高的，所以这里我依次选用了 <strong> 和 <em>。一开始后面两个数字我是想用 <small> 标签的，因为它俩看起来是在是太像 <small>了。但是去看了一下定义发现 <tt> <i> <b> <big> <small> 这几个标签都只是为了文字样式定义的，并不具有权重的定义。这就再一次论证了，之前提到的不要因为它看起来像某个标签而去选择对应的标签。而应该脱离设计稿，基于文档的权重*去考虑。
哪些情况我们可以用这几个服务于文字样式的标签呢？比如一些装饰性的小图标，或这不具有权重的文本...这里可以看到我用 <i> 作为了数字前小图标的标签。当然如果你的图标选择的是 svg 的方案，那这里用 <svg> 则更适合。
四、无障碍访问
因为我们自己开发网页，自己也使用网页。所以往往会有一种所有人都和我们一样的错觉。其实无障碍的范畴是非常的广的。远远不只是阅读网页有障碍的弱势群体。他们有可能是网络环境差的人，也有可能是暂时找不到鼠标，或者键盘失灵的朋友，也有可能是扫描你网页的网络爬虫...
对于无障碍访问，足以开一个新的文章来讲。自己经验也尚欠火候，这里只提一下几个自己知道的细节。
可以我在闪电图标内部放了一个实际看不见的文案 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 说起。
结尾
这里再放一下文中反复提到但几个个人观点。
- 写 HTML 之前一定要理清楚网页的大纲，分清楚主次；
- 写好 HTML 应该暂时摒弃设计稿；
- 写好 HTML 应该暂时摒弃技术的实现难度；
- 写好 HTML 应该考虑更多无障碍的细节；
- 写好 HTML 不是一步登天的，不断调整和迭代的过程；
- HTML 容易被人忽视，但并不代表它不重要；
和所有技术一样，想要写好 HTML 就要花更多的时间，去考虑更多细致上的问题。 但是我也不得不承认我们总是会把时间分配给那些看起来对于项目上更重要的事情。所以这里只是提供一些自己总结的写好 HTML 的几个思路，具体实际的时候还是需要自己去斟酌。
这边再安利一个可以帮助大家，写好 HTML 的纯 CSS 即插即用的工具 @_nu/html-validator
本文纯属个人观点，有任何不足和疑问可以给我留言
