Latest from ghostzhang's 语义化相关

CSS类命名的语义化VS结构化方式 ... 7 replies

ghost@vip.qq.com (Ghostzhang) — Wed, 29 Jul 2009 15:11:48 +0800

原文地址：http://blog.bingo929.com/css-coding-semantic-naming.html

一般而言，CSS类名的语义化声明方式应当考虑你的页面中某个相对元素的”用意”，独立于它的”定位”或确切的特性(结构化方式)。像left-bar, red-text, small-title…这些都属于结构化定义的例子。

让我们看看下面这个例子:

CSS-语义化-结构化

　　…而现在我们想把页面中的元素调换一下位置，如果你使用的是结构化方式(1)，那么你就要把所有CSS类名重新进行定义，因为它们的位置变了。在布局(3)中，我们看到元素都倒转了: right-bar 现在成了 “left-bar”，而 left-content 成了 “right-content”。如果你使用语义化方式则避免了此类问题。

　　换句话说，使用语义化方式的话，你在修改网站布局的时候可以仅仅修改相关CSS类的属性即可，而不用修改它们的类名了，如果网站的代码很庞大，这将节省大量的时间。

换种角度看“语义化” ... 0 replies

ghost@vip.qq.com (Ghostzhang) — Thu, 23 Jul 2009 20:52:49 +0800

原文地址：http://www.cssforest.org/blog/index.php?id=142

《页面重构中的语义化》所表达的好像不太好理解，我们可以换一个角度来看看。

在“表格布局”1 的时代，大家所使用的布局方式都是表格，没有其它的方式可以选择， Dreamweaver的可视化操作大大的简化了页面制作的过程，而且当时虽然网络情况比现在差得多，但并没有多少人会去关注页面性能这块。搜索引擎对于表格布局也无能为力，只能过复杂的算法去把内容抓取出来，而且很难知道哪些内容是重点，因为会正确使用标签的页面太少了。那搜索引擎如何得知页面的重点呢？没错，就是页面头部的信息，在这个区域，标签是有语义的，明确的指出页面的标题、主要内容、作者、版权等等信息。

接着，WEB标准进入了国人的视野，它带来了颠覆性的改变，从页面制作方式到思维方式的种种改变。推荐使用“CSS布局”2 代替原先的“表格布局”，让原先让人遗忘的许许多多HTML标签重新被认识，并以较严格的方式使用，在一定程度上规范了页面书写的形式，像“标签闭合”、“标签、属性使用小写”、“使用DTD”等等。搜索引擎也很支持这种方式制作的页面，因为算法不用像以前那么复杂了，可以很简便的得到内容的主次，提高抓取的质量。这也是为什么WEB标准会更利于 SEO 。

那么，如果标签足够表达内容的语义，页面内容的语义就能以标签的方式被传递给更多的用户。因此，所谓语义化，就是尽可能的理解要表达的内容，选择适合的标签，将内容转换成浏览器认识的语言，通过浏览器传达给用户。可以理解为将内容的语义通过标签的方式表现。

写过 XML 的同学可能体会会深些，在XML中，标签是可以自定义的，但这些标签的定义都是为了让读取更容易，或许可以看下常见的RSS，它就是一个标准化的XML格式，但RSS里使用的标签都是有语义的，你可以通过标签很清楚的看出哪部分是代表什么的。虽然(X)HTML看起来比RSS复杂得多，但在搜索引擎看来，好的页面不就是一个XML？

做为对《页面重构中的语义化》的一个补充，欢迎讨论。

1 使用表格单元格的划分来进行页面布局的方式。
2 使用样式的定位属性进行布局的方式。

页面重构中的语义化 ... 0 replies

ghost@vip.qq.com (Ghostzhang) — Thu, 23 Jul 2009 20:39:10 +0800

原文地址：http://www.cssforest.org/blog/index.php?id=139

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

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

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

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

另外一个例子，关于标题的，“是否所有的块都需要添加一个标题？”小志的《列表模块是否需要标题》讨论了这个问题。我们经常使用隐藏的文字将内容放到页面上，这种做法我们一般也称之为“语义化”；选择要使用什么标签，我们也称之为“语义化”。选择标签是件很痛苦的事，比如一个电影列表页面

看上去是一个列表，是列表就使用 li ，很多同学都是这种思维，这个角度偏重于标签的语义。我们再从内容的角度来看，什么是列表？我记得之前看过的解释是“一些简短、有某种关联性的内容排列在一起，称之为列表”（准确的解释现在不好找了，百度和google也有找不到的东西），应该是区别于段落的，从这点上看，列表中放标题、段落、块等等都是不合适的。很多时候我们都只是关注到其中的一方面，比如我们在写代码的时候，更多的关注到当前部分应该使用什么标签，而不是关注到这个内容在整个页面中应该是什么语义的。
前段时间重新思考了这个问题：“什么是语义化”。发现一直以来都很纠结，因为我们把两个思维混在一起了，因此我提出了“内容语义化”和“代码语义化”，在一定程度上能让思维清析些，之后发现，其实“内容语义化”和“代码语义化”并不是独立的东西，我们是根据内容的语义去选择标签的，这时标签的语义也就代表了内容的语义。

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

目前来说，做语义化的确还不能体现出它的优点，可能的原因是：
1.除了专业的人外，没人会去看我们的标签是否使用得有语义
2.HTML的标签还不足以表达所有可能的语义
3.语义化会需要增加一些额外的代码

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

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

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

1 页面无样式的状态。