页面重构中的语义化

在想什么是“模块化”的时候，HTML部分的模块化也让我烦恼了一段时间，其中引出了另一个问题，就是“语义化”，本文想与大家探讨的内容。

“语义化”的知名度应该不亚于“模块化”，WEB标准在国内推广后，其中一个亮点就是“有利于 SEO ”，而“语义化” 也就被提出来了。目前讲“语义化”的文章基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等，大多是洗脑文。

做了几年的页面，听了不少人讲“语义化”，也讨论了几年的“语义化”，可是到现在，大部分人都还是不清楚到底“语义化”要怎么做，这几年间我也试着去理清相关的内容，只是有些点始终无法想透，特别是那些没有嵌套错误的标签，如列表（li），可以使用的标签十分广泛（可包含标签： %Flow; ），加上对“列表”理解上存在差异，导致在一定程度上的滥用。

我一直使用的方法是，将页面样式去掉，看页面是否以一种文档格式显示，并且是容易阅读的。使用这个方式可以让你对“语义化”的理解在短时间内有所提升。当然有些标签在浏览器中并无具体的表现，或表现与其它标签一样，不过方便用户读取内容，不正是“语义化”的意义吗？好像很对，在 森林的聚会 上被allan问到 做语义化到底为了什么？ 时，我一时无言了，只是为了“祼奔”1 时好看？有多少用户会看到“祼奔”的页面，并且看下去？当时我是用了“盲文阅读器对不同标签所发出的声音是不同的，以此来传达信息的重要性”来说服allan，只是，连我自己都说服不了。

另外一个例子，关于标题的，“是否所有的块都需要添加一个标题？”小志的《列表模块是否需要标题》讨论了这个问题。我们经常使用隐藏的文字将内容放到页面上，这种做法我们一般也称之为“语义化”；选择要使用什么标签，我们也称之为“语义化”。选择标签是件很痛苦的事，比如一个电影列表页面，看上去是一个列表，是列表就使用 li ，很多同学都是这种思维，这个角度偏重于标签的语义。我们再从内容的角度来看，什么是列表？我记得之前看过的解释是“一些简短、有某种关联性的内容排列在一起，称之为列表”（准确的解释现在不好找了，百度和google也有找不到的东西），应该是区别于段落的，从这点上看，列表中放标题、段落、块等等都是不合适的。很多时候我们都只是关注到其中的一方面，比如我们在写代码的时候，更多的关注到当前部分应该使用什么标签，而不是关注到这个内容在整个页面中应该是什么语义的。

前段时间重新思考了这个问题：“什么是语义化”。发现一直以来都很纠结，因为我们把两个思维混在一起了，因此我提出了“内容语义化”和“代码语义化”，在一定程度上能让思维清析些，之后发现，其实“内容语义化”和“代码语义化”并不是独立的东西，我们是根据内容的语义去选择标签的，这时标签的语义也就代表了内容的语义。

所谓语义化，就是尽可能的理解要表达的内容，选择适合的标签，将内容转换成浏览器认识的语言，通过浏览器传达给用户。从这个角度来说，我们更像是“翻译”。我们要做的还不只是简单的翻译，毕竟我们的“听众”并不是单一的。

目前来说，做语义化的确还不能体现出它的优点，可能的原因是：

• 除了专业的人外，没人会去看我们的标签是否使用得有语义
• HTML的标签还不足以表达所有可能的语义
• 语义化会需要增加一些额外的代码

简单说下我的想法：记得前段时间有同学向我反映一个设计稿的问题，主要是说产品经理让她改设计稿上一个写反了的广告语，“XXYY”改成“YYXX”，而且看上去意思差别并不大。我给的回答是，在我们这种外行看来可能没什么差别，但这正是专业的体现。 外行看热闹，内行看门道 ，我们写的页面并不是所有人都会去看源代码的，那我们为什么还要注意那么多东西呢？ 我们也一样，用户只是看到了一小部分，更多的是做给懂得点右键选“查看源文件”的人看的 这点也是从我们自身发展来说的，如果你想在这个行业内有所建树，专业化是必须的。也就是说如果你不考虑自己的发展，也就不用讨论“语义化”的问题了。

HTML5新增的几个标签，更多的补充了目前HTML标签语义上的不足，这点也可以看出语义化是以后发展的一个方向，当然更大的目标是统一的实现标准，语义化只是为了这个目标所使用的一个方法。这可能需要相当的一段时间，而我们正经历着这个过程。

在“语义化”的过程中，的确是需要增加一些标签。这个需要做页面的同学先明白一个问题：我们是为了什么而做页面的？正如前面所说，我们是内容的传播者，我们尽可能的让更多的用户更容易的从互联网获取信息。那么，表现上不需要的标签就是多余的吗？虽然我们现在很多的表现还需要额外的标签来支持，但这也是因为浏览器对样式的支持不完全造成的。随着浏览器对样式支持的改进，这类为了表现而写的标签也会越来越少。