谈谈对HTML语义化的理解

随着HTML5的普及，越来越多的新标签被加入到HTML里，写进我们的代码中。如何合理的运用这些标签，HTML语义化就是最好的实现。

什么是语义化

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

简单讲就是根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

为什么要语义化

随着互联网的发展，WEB也承载越来越多的信息（图片，声音，视频等），人们开始用机器来处理网络信息，就此诞生了搜索引擎。如次庞大及复杂的信息如何让搜索引擎处理和挖掘，所以让机器能够更好地读懂WEB上内容就变得越来越重要。

传统的Web由文档组成，W3C希望通过一组技术支撑“数据的Web”，即Web of Data，将Web看作一个存储和管理数据的大型分布式数据库。语义Web是构造这样的数据Web的重要一环，帮助人们创建数据并存储在Web上，创建相关的词汇表及数据的处理规则。 —— w3.org
既然W3C有如此雄心为我们规划未来语义网，我们开发者作为W3C的坚定追随者还有什么理由不跟着大步迈进呢？

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

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

• 清晰的页面结构

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

• 支持更多的设备

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

• 有利于SEO

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

• 便于团队开发和维护

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

如何语义化

语义化的HTML结构首先要强调HTML结构

HTML结构是页面的骨架，一个页面就好像一幢房子，HTML结构就是钢筋混泥土的墙。CSS是装饰材料，是原木地板，是大理石，是油漆，是用来装饰房子的。合理的房屋结构和赏心悦目的装修搭配才是一个舒适的居住环境。

或者HTML结构对我们来说本身就是某种语言代码逻辑，CSS就是需要展现的数据。我们可以通过设置不同的数据（CSS样式）来得到不同的结果输出（表现）。数据是灵活多变的，但业务逻辑，代码本身结构却是固定通用的。

所以，拥有一个既清晰又干净的HTML结构是非常重要的。

分清语义化标签和默认样式

HTML在页面中的作用就是结构和含义，通俗点说就是划分内容，这里放什么，我们放的是什么。HTML本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的， 不要误会这是HTML的表现，这些其实是HTML默认的CSS样式在起作用。可以保证去掉或样式丢失的时候也能让页面呈现清晰的结构。

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

所以要先确定HTML标签，再来选用合适的CSS样式。布局的标签是通过HTML内在的上下文语境来决定当前的语义化的结构，而不是通过外在的样式表现来决定能衬托的标签。那些样式只是浏览器默认的CSS样式。它们就只是开发商默认给新房刷的大白粉墙面一样，不同的装修公司设计的风格不同的，也可能只是简单刷白，那我们刚好可以复用，也或者会再贴其它墙纸，那我们也只好覆盖它。重点永远在墙体。

样式本身是没有意义和内容逻辑的，维护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关联起来。

相关链接

http://www.w3.org/TR/html5/
http://www.w3school.com.cn/semweb/
http://www.w3.org/standards/semanticweb/
http://www.w3school.com.cn/html5/