页面重构中的语义化
Ghost 发表于 [2009-07-10 18:15]
在想什么是“模块化”的时候，HTML部分的模块化也让我烦恼了一段时间，其中引出了另一个问题，就是“语义化”，本文想与大家探讨的内容。
“语义化”的知名度应该不亚于“模块化”，WEB标准在国内推广后，其中一个亮点就是“有利于 SEO ”，而“语义化” 也就被提出来了。目前讲“语义化”的文章基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等，大多是洗脑文。
做了几年的页面，听了不少人讲“语义化”，也讨论了几年的“语义化”，可是到现在，大部分人都还是不清楚到底“语义化”要怎么做，这几年间我也试着去理清相关的内容，只是有些点始终无法想透，特别是那些没有嵌套错误的标签，如列表（li），可以使用的标签十分广泛（可包含标签： %Flow; ），加上对“列表”理解上存在差异，导致在一定程度上的滥用。
我一直使用的方法是，将页面样式去掉，看页面是否以一种文档格式显示，并且是容易阅读的。使用这个方式可以让你对“语义化”的理解在短时间内有所提升。当然有些标签在浏览器中并无具体的表现，或表现与其它标签一样，不过方便用户读取内容，不正是“语义化”的意义吗？好像很对，在 森林的聚会 上被allan问到 做语义化到底为了什么？ 时，我一时无言了，只是为了“祼奔”1 时好看？有多少用户会看到“祼奔”的页面，并且看下去？当时我是用了“盲文阅读器对不同标签所发出的声音是不同的，以此来传达信息的重要性”来说服allan，只是，连我自己都说服不了。
另外一个例子，关于标题的，“是否所有的块都需要添加一个标题？”小志的《 列表模块是否需要标题 》讨论了这个问题。我们经常使用隐藏的文字将内容放到页面上，这种做法我们一般也称之为“语义化”；选择要使用什么标签，我们也称之为“语义化”。选择标签是件很痛苦的事，比如一个电影列表页面
看上去是一个列表，是列表就使用 li ，很多同学都是这种思维，这个角度偏重于标签的语义。我们再从内容的角度来看，什么是列表？我记得之前看过的解释是“一些简短、有某种关联性的内容排列在一起，称之为列表”（准确的解释现在不好找了，百度和google也有找不到的东西），应该是区别于段落的，从这点上看，列表中放标题、段落、块等等都是不合适的。很多时候我们都只是关注到其中的一方面，比如我们在写代码的时候，更多的关注到当前部分应该使用什么标签，而不是关注到这个内容在整个页面中应该是什么语义的。
前段时间重新思考了这个问题：“什么是语义化”。发现一直以来都很纠结，因为我们把两个思维混在一起了，因此我提出了“内容语义化”和“代码语义化”，在一定程度上能让思维清析些，之后发现，其实“内容语义化”和“代码语义化”并不是独立的东西，我们是根据内容的语义去选择标签的，这时标签的语义也就代表了内容的语义。
所谓语义化，就是尽可能的理解要表达的内容，选择适合的标签，将内容转换成浏览器认识的语言，通过浏览器传达给用户。从这个角度来说，我们更像是“翻译”。我们要做的还不只是简单的翻译，毕竟我们的“听众”并不是单一的。
目前来说，做语义化的确还不能体现出它的优点，可能的原因是：
- 除了专业的人外，没人会去看我们的标签是否使用得有语义
- HTML的标签还不足以表达所有可能的语义
- 语义化会需要增加一些额外的代码
简单说下我的想法：记得前段时间有同学向我反映一个设计稿的问题，主要是说产品经理让她改设计稿上一个写反了的广告语，“XXYY”改成“YYXX”，而且看上去意思差别并不大。我给的回答是，在我们这种外行看来可能没什么差别，但这正是专业的体现。 外行看热闹，内行看门道 ，我们写的页面并不是所有人都会去看源代码的，那我们为什么还要注意那么多东西呢？ 我们也一样，用户只是看到了一小部分，更多的是做给懂得点右键选“查看源文件”的人看的 这点也是从我们自身发展来说的，如果你想在这个行业内有所建树，专业化是必须的。也就是说如果你不考虑自己的发展，也就不用讨论“语义化”的问题了。
HTML5新增的几个标签，更多的补充了目前HTML标签语义上的不足，这点也可以看出语义化是以后发展的一个方向，当然更大的目标是统一的实现标准，语义化只是为了这个目标所使用的一个方法。这可能需要相当的一段时间，而我们正经历着这个过程。
在“语义化”的过程中，的确是需要增加一些标签。这个需要做页面的同学先明白一个问题：我们是为了什么而做页面的？正如前面所说，我们是内容的传播者，我们尽可能的让更多的用户更容易的从互联网获取信息。那么，表现上不需要的标签就是多余的吗？虽然我们现在很多的表现还需要额外的标签来支持，但这也是因为浏览器对样式的支持不完全造成的。随着浏览器对样式支持的改进，这类为了表现而写的标签也会越来越少。
1 页面无样式的状态。
文章地址：http://www.cssforest.org/blog/index.php?id=139
《页面重构中的语义化》采用的授权是创作共用的 “署名-非商业性使用-相同方式共享 3.0 通用许可”.
文章被分类到：重构思想
悉尼 在 385 日 之前 说：
语义话的的确确是下一步网页的重要动向呢
愚人码头 在 385 日 之前 说：
鬼哥写的比我好，顺便大家可以看看我的《语义化的HTML结构到底有什么好处？》http://www.css88.com/archives/1668
糖伴西红柿 在 385 日 之前 说：
单从页面来看，语义化与否根本无迹可寻。而从开发者和爬虫的角度来说，对前者来说，意义更大的是代码的可读性吧，能有多大的性能提升，我还真不知道，对爬虫或者机器来说，语义化能更容易好理解。但是我觉得，最好的方式是让爬虫或机器更人工智能化，而不是让人去降级成机器化。当然，这个问题，不是页面工作者的职能。我依然认为语义化其实很重要，但是很难把握。个人见解，仅供参考。
菜鸟飞啊飞 在 385 日 之前 说：
“从这个角度来说，我们更像是‘翻译’”，有点形象..“翻译本身更类似一门艺术，而不是科学”..重构工作本来就不是像比着齐垒砖那样严格少变的，应当结合自己的理解在里面。
常常不得不停下来考虑一个细节到底应当用什么样的标签，在动手前跳出细节，整体的理解信息的内容是必要的..下次用到li的时候也许又要犹豫一下鬼哥上面提到的了..好文，最后一段中间那几句尤其滴好~~..
charies 在 385 日 之前 说：
在制作页面时，我把语义化 当成一种社会责任。
Ariex 在 385 日 之前 说：
语义化为了什么？
为了盲人？试问有几个盲人有这种上网需求的？
为了蜘蛛？蜘蛛不认识标签，只认识正则！
那到底为了什么？
为了数十年之后看自己的代码还能看得懂！
li是列表，用来表述并列关系的一系列事务。“简短”？多简叫“短”？
Ghost 在 385 日 之前 说：
@Ariex 盲人不是没有上网的需求，而是没有上网的条件，而且难道就只有盲人吗？“残疾人”可不是只有盲人。如果有兴趣可以去了解下508的内容。
蜘蛛是不认识标签，但正则里不也需要匹配标签？不然就没有主次了，收录的质量也就不高，影响的当然就是内容被传播的效果。
目前来说还达不到方便协同的效果，但怎么都比乱写的强。
保定人才网 在 384 日 之前 说：
在复杂的网站结构中,语义化作起来很费脑子^^我也正在进行重构工作,越来越晕了
wlsy 在 384 日 之前 说：
鄙人之前有写过一篇相关文章特来分享，http://www.g9net.com/2009/06/28/related-to-the-semantic-web-front-end-of.html
如文中有误还望指正:-)
Q 在 379 日 之前 说：
所谓在适合的时间做合适的事，HTML标签也应该是这样。让网页（无CSS加载时）回归到最初始的文档格式，这也是语义的意义所在。
十年磨一剑 在 361 日 之前 说：
“如果你想在这个行业内有所建树，专业化是必须的。也就是说如果你不考虑自己的发展，也就不用讨论‘语义化‘的问题了”
太有道理了，鬼哥最近的文章都是从大局出发，受益匪浅，我对语义化还了解得太少，目前的理解是，所谓语义，就是数据的含义，是大家对某方面达成的一种共识，这不仅有利于信息的传播，对于共同协作，站点后期的维护也是很重要的。
十年磨一剑 在 361 日 之前 说：
“很多时候我们都只是关注到其中的一方面，比如我们在写代码的时候，更多的关注到当前部分应该使用什么标签，而不是关注到这个内容在整个页面中应该是什么语义的。”
期待能有更深入的了解，鬼哥能不能用一些实际的案例来深入的讲一下语义化。