语义化

前段时间群里听到有人疑问随着html5的盛行，那div该什么时候用呢？还有article、section、details等等类似的标签该怎么区别分别什么时候使用？我想这个问题其实很多人都会存在，甚至在没html5以前，xhtml中的一些标签灵活使用都会考虑很久，其实这个问题我早期甚至现在也会有，因为有的标签语言是够了，但是却要为它付出些额外代价来渲染它，达到我们的布局效果，但是偶尔这些渲染会带来很多各种兼容性bug懒惰心作祟会摒弃语义化，但是这样做和用表格布局我觉得没有任何的区别，偷懒也要视情况而定。言归正传说说正题。

先说说div，其实div和span这2个标签本身就是2个不存在任何语言的标签它们就是大众情人，它一般是用来“把文档分割成独立的、不同的部分”(比如单独的模块)，我们一般是通过类名或者id名来给这个标签赋予生命（语义），比如一个评论模块，我们给他类comment那它才有生命，在没任何类前它就是块无意义的块级，既然如此那对于div通俗点说就是应该用在没有更好的元素的时候（例：一块仅仅是用了做模块区分或者展示上区分的时候如包裹一段代码块在对内容定位处理的包装单元等）。

然后是section这个东西应该是最让人困惑的吧，它按照w3c的说法是用来定义文档中的节（section、区段如章节、页眉、页脚或文档中的其他部分），而div在定义也是可定义文档中的分区或节（division/section）。那我们应该怎么去区分它们呢？在上面其实已经说过div本身就是没有语义的，而这个时候section的跳出更加是取代了对于区段的完美诠释，比如最常见的文章区域的划分（例：XhtML:它是......）对于这个我想很对人会用dt加dd其实本身是没错，不过如果我们这个时候希望加重“xhtml”的权重需要一个h2或者h1的包裹的时候那就不合适了，因为根据标准dt里面不能嵌套块元素（详细的嵌套规则有兴趣的可以看看这个文章http://www.junchenwu.com/2007/01/allowed_nesting_of_elements_in_html_4_strict_and_xhtml_10_strict.html），那在没有section，前我们会用一个div去包裹，然后里面在是<h2>XhtML</h2><p>它是......</p>，而现在我们只需要<section><h1>XhtML</h1><p>它是......</p></section>就好了。因此section元素标签用来表现普通的文档内容或应用区块，一个section通常由内容及其标题组成（不要为没有标题的内容区块使用section）。不过要注意下不要将section作为用来设置样式或行为的“钩子”容器，那是div的使命（即当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div元素而非section，因为这个时候这个容器是毫无意义的，只是用来做展示的div更合适）。


接着article，它其实更加困惑的应该是和section的区别，根据w3c描述，article标签是用来装载显示一个独立的文章内容（如定义外部的内容，一篇完整的论坛帖子，一则网站新闻，一篇博客文章等等，一个用户评论等等）。