标签语义化

主要总结标签语义化方面的内容。

HTML的标签都是有语义的。

下面列出一些常见的标签及其语义：

完整标签列表及更多HTML5标签请参考：
http://www.w3school.com.cn/tags/index.asp

这里提一下，我们常用的列表相关的标签有ol, ul, dl. 那么什么时候用dl， 什么时候用ol ul 呢？
-- 对于重复的条目，如果打乱顺序，不影响语义就是无序列表（ul）；否则就是有序列表(ol).
-- 如果内部带一个term, description的用dl.
比如图片带个文字说明，图片带个问题说明....如此重复的采用dl比较好。

为什么要使用语义化标签？

由于css 很强大，无论有没有按照语义选择标签，都可以实现需要的设计。但这也是把双刃剑。事实上，css布局只是web标准的一部分。在html, css, js 三个元素中，hmtl才是最重要的，结构是重点，样式是用来修饰结构的。

so, 正确的做法是：先确定html, 确定语义的标签，再选用合适的css。

此外，搜索引擎是看不到视觉结果的，它看到的只是代码。它只能通过标签来判断内容的语义。

如何确定你的标签是否语义良好?

-- 去掉样式，看网页结构是否组织良好有序，是否仍然有良好的可读性。

有个工具很好用，web-developer。浏览器可以安装此插件，开启后，disable all styles 禁用css，可以帮助我们查看页面结构。

常见标签应用场景

一、标题和内容

有很多静态页面结构是标题+内容的布局，例如：

在这里使用div + h2 + p 标签的方式要优于全部使用div标签的方式。要记住，div span标签是用来辅助实现设计需求的。在写页面的时候，首先选择语义化的标签，然后配合css设计样式来达到实现设计需求的目的。

二、表单

很多场景涉及表单填写：

这里：使用label + input标签的方式要优于 div + input的方式。
同时，表单域要用fieldset标签包起来，并用legend标签说明表单的用途。（fieldset默认有边框，legend也有默认样式，我们可以设置fieldset border 为none , legend display 为none 来兼顾语义化和设计两方面的需求）
此外，label 标签的for属性应该与input 标签的id关联起来。

三、表格

css布局日益流行，很多人患上了“table恐惧症”，其实table也有自己的语义和用途，它在二维数据展现上是比较好的。

使用table时注意：表格标题要用caption; 表头要用thead, 主体用tbody， 尾部用tfoot. 表头和一般单元格要分开，分别用th, td.

四、语义化标签时应注意的一些其他问题

• 尽可能少地使用无语义标签div 和span；

• 语义不明显的既可以用p也可以用div的地方，尽量用p；

• 不要使用纯样式标签，如font, b， u等，改用css设置。语义上需要强调的文本可以使用em strong标签等。

• 加强“不可见”内容的可访问性
  背景图上的文字应该同时写在html中，并使用css使其不可见，有利于搜索引擎抓取你的内容，也可以在css失效的情况下看到内容。

Reference

[1].编写高质量代码-Web前端开发修炼之道 -- 曹刘阳.