谈谈HTML语义化

随着HTML5的普及，越来越多的新标签被加入到HTML里，HTML语义化越来越被重视，所以想写篇文章学习整理一下关于HTML语义化的相关知识。

HTML语义化的含义

Tim Berners-Lee（万维网发明者）最早提出了语义网（Semantic Web）的概念，而语义网的核心是通过给万维网上的文档（如HTML）添加能够被计算机所理解的元数据（Meta data），从而使整个互联网成为一个通用的信息交换媒介。

其实简单说来就是让机器可以读懂内容。

为什么要语义化

对于当前的 Web 而言，HTML 是联系大多数 Web 资源的纽带，也是内容的载体，人们开始用机器来处理网络信息，就此诞生了搜索引擎。而如此庞大及复杂的信息如何让搜索引擎处理和挖掘，所以让机器能够更好地读懂WEB上内容就变得越来越重要。

传统的Web由文档组成，W3C希望通过一组技术支撑“数据的Web”，即Web of Data，将Web看作一个存储和管理数据的大型分布式数据库。语义Web是构造这样的数据Web的重要一环，帮助人们创建数据并存储在Web上，创建相关的词汇表及数据的处理规则。 —— w3.org

既然W3C有如此雄心为我们规划未来语义网，我们开发者作为W3C的坚定追随者还有什么理由不跟着大步迈进呢？

语义网的基础必然是语义化的结构网页

此外，语义化可以带来许多好处：

• 清晰的页面结构

去掉或样式丢失的时候,也能让页面呈现清晰的结构，增强页面的可读性。

• 支持更多的设备

屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。 如果你使用的含语义的标记,屏幕阅读器会根据你的标签来判断网页的内容，而不是一个字母一个字母的拼写出来。

• 有利于SEO

和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。

• 便于团队开发和维护

在团队中大家都遵循同一个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。

如何语义化

如本文开头所说，语义化随着HTML5的执行而受到了更大的关注，显然，正确理解HTML的作用才是更好实现语义化的基础。

一个页面通常由HTML、CSS和Javascript组成，而其中HTML的作用正如一栋建筑的结构骨架，CSS装饰其外表，JS实现其功能。

HTML在页面中的作用就是结构和含义，通俗点说就是划分内容，这里放什么，我们放的是什么。

结构(HTML)才是重点，样式(CSS)是用来修饰结构的。

所以要先确定HTML标签，再来选用合适的CSS样式。布局的标签是通过HTML内在的上下文语境来决定当前的语义化的结构，而不是通过外在的样式表现来决定能衬托的标签。

一些语义化实用建议

根据文档上下文结构合理的选用最适合表达当前语义的标签；

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

• 不要使用纯样式标签，如：b、font、u等，一切表现改用css设置；

• h标签的使用应该根据重要性逐级递减，没有断层。并且一个页面只能有一个h1；

• 提高关键词密度，如图片替换alt，链接说明title；

• 正确使用内容容器，如段落p，列表ul, ol, li, dl, dt, dd

• 需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；

• 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；

• 表单域要用fieldset标签包起来，并用legend标签说明表单的用途；

• 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

参考链接： 谈谈对HTML语义化的理解-Haizhou's Blog