在前端开发过程中，很多人谈到“模块化”，很少人特别关注“语义化”，简单的说大多数人更关注功能的实现，而忽视了实现的细节。所谓HTML语义化，就是尽可能的理解要表达的内容，选择适合的HTML标签，将内容转换成浏览器认识的语言，通过浏览器传达信息给用户。
目前很多的前端书籍取名就叫精通DIV+CSS，让人感觉DIV可以搞定一切，但是DIV标签仅代表一个块状标记，HTML的每个标签都有它特定的意义，而语义化就是让我们在适当的位置用适当的标签，以更好的让人和机器（机器可理解为浏览器可理解为搜索引擎）都一目了然。
下面来说说HTML语义化具体的作用
1、对于用户
整个语义化对已用户的影响微乎其微，没有多少个用户会在看网页时直接查看源代码，网站上也不太可能出现样式丢失的问题。所以此点基本上可以忽略。
2、对于搜索引擎
页面的语义化对搜索引擎的理解非常重要，因为现有的很多搜索引擎目前注重的还是依依标记，而非表现标记。例如H1-H6的合理使用。strong标签的合理使用都会给SEO带来很好的效果。需要注意的是，语义化并不特指H1~H6和strong标签。
3、对于开发人员
W3C给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，利于模块化的开发。
HTML 规范其实一直在往语义化的方向上努力，许多元素、属性在设计的时候，就已经考虑了如何让各种用户代理甚至网络爬虫更好地理解HTML 文档。HTML5 更是在之前规范的基础上，将所有表现层（presentational）的语义描述都进行了修改或者删除，增加了不少可以表达更丰富语义的元素。为什么这样的语义元素是有意义的？因为它们被广泛认可。所谓语义本身就是对符号的一种共识，被认可的程度越高、范围越广，人们就越可以依赖它实现各种各样的功能。
HTML5 并非 Web 语义唯一倚仗的规范，除了 W3C 和 WHATWG 外，还有其它的组织在为扩展、标准化 Web 语义做着贡献。只要有浏览器厂商、搜索引擎原意支持，它们的规范一样可以成为通用的基础设施。例如 microformats 社区以及 http://Schema.org 上都有对 HTML 以及 Microdata 规范的扩展词汇表，Google、Bing、Yahoo! 等搜索引擎以及各个主流浏览器都不同程度地接纳了其中定义的语义扩展，并应用在了生产中。
讲了这么多内容，但是可能还是不太理解什么是语义化HTML。要求：将下面的内容转化成语义化HTML~
以上内容的代码实现为：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>旅游产品经理（出境游）招聘</title>
</head>
<body>
<h1>旅游产品经理（出境游）</h1>
<dl>
<dt>工作地点</dt>
<dd>广州</dd>
<dt>职位类别</dt>
<dd>产品运作</dd>
<dt>学历要求</dt>
<dd>本科</dd>
<dt>人数</dt>
<dd>2</dd>
<dt>更新日期</dt>
<dd>2011-09-16</dd>
</dl>
<h2>工作职责</h2>
<ol>
<li>前期目的市场分析、市场调研以及制定产品设计思路。</li>
<li>制定所负责的区域的产品资源采购策略与订单策略。</li>
<li>本地市场竞争信息的收集、分析及对策。</li>
<li>参与制定所负责区域的市场营销策略。</li>
<li>下属日常工作的抽查、监控和培养。</li>
</ol>
<h2>职位要求</h2>
<ol>
<li>大专或以上学历。</li>
<li>2年或以上同等职位工作经验者。</li>
<li>具备旅行社经验者优先，有旅行社出境游（港澳或东南亚）团队管理经验者优先。</li>
<li>普通话标准，英文较好，口吃清晰，极强的沟通能力，抗压力强。</li>
<li>良好的客户服务意识，良好的职业道德和团队合作意识。</li>
<li>良好的数据分析，逻辑分析及学习能力。</li>
<li>熟练使用计算机和Office办公软件。</li>
</ol>
</body>
</html>
上述代码在不添加CSS的情况下，在浏览器中看到的内容如下：
最后，除了HTML的语义化完，CSS也可以做到语义化，比如如何命名ID和Class等。后续会再做介绍。
Related posts: