CSS中div 和article, section区别

看到很多人为了新的section就把div改成section,其实是错误的,section的真正应用只是很少,主要是article里面的标签,

这样语义化才有效,如果无缘无故把div改为section,反而是误导了搜索引擎.

div :

这个标签是我们见得最多、用得最多的一个标签。本身没有任何语义,用作布局以及样式化或脚本的钩子(hook)。

section :

与 div 的无语义相对,简单地说 section 就是带有语义的 div 了,但是千万不要觉得真得这么简单。section 表示一段专题性的内容,一般会带有标题。看到这里,我们也许会想到,那么一篇博客文章,或者一条单独的评论岂不是正好可以用 section 吗?接着看:

当元素内容聚合起来更加言之有物时,应该使用 article 来替换 section 。

那么,section 应该什么时候用呢?再接着看:

section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一个网站的主页可以分成简介、新闻和联系信息等几部分。其实我对这里传达信息很感兴趣,因为感觉 section 和下面要介绍的 artilce 更加适用于模块化应用,这个话题以后会出篇专门的文章来讨论,这里暂时略过。

要注意,W3C 还警告说:

section 不仅仅是一个普通的容器标签。当一个标签只是为了样式化或者方便脚本使用时,应该使用 div 。一般来说,当元素内容明确地出现在文档大纲中时,section 就是适用的。


article :

article 是一个特殊的 section 标签,它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。一般来说, article 会有标题部分(通常包含在 header 内),有时也会 包含 footer 。虽然 section 也是带有主题性的一块内容,但是无论从结构上还是内容上来说,article 本身就是独立的、完整的。

HTML Spec 中接着又列举了一些 article 适用的场景。

当 article 内嵌 article 时,原则上来说,内部的 article 的内容是和外层的 article 内容是相关的。例如,一篇博客文章中,包含用户提交的评论的 article 就应该潜逃在包含博客文章 article 之中。

问题是怎么才算“完整的独立内容”?有个最简单的判断方法是看这段内容在 RSS feed 中是不是完整的。看这段内容脱离了所在的语境,是否还是完整的、独立的。


总结 :

        div section article ,语义是从无到有,逐渐增强的。div 无任何语义,仅仅用作样式化或者脚本化的钩子(hook),对于一段主题性的内容,则就适用 section,而假如这段内容可以脱离上下文,作为完整的独立存在的一段内容,则就适用 article。原则上来说,能使用 article 的时候,也是可以使用 section 的,但是实际上,! ! 假如使用 article 更合适,那么就不要使用 section ! ! 。nav 和 aside 的使用也是如此,这两个标签也是特殊的 section,在使用 nav 和 aside 更合适的情况下,也不要使用 section 了。

对于 div 和 section、 article 以及其他标签的区分比较简单。对于 section 和 article 的区分乍看比较难,其实重点就是看看这段内容脱离了整体是不是还能作为一个完整的、独立的内容而存在,这里面的重点又在完整身上。因为其实说起来 section 包含的内容也能算作独立的一块, ! ! 但是它只能算是组成整体的一部分! !,! !  article 才是一个完整的整体  ! !。

因为其实有些时候每个人都有自己的看法,所以难免有难于决断的时候,怎么办?

在 HTML5 设计原理 中,有一条是专门用来解决类似情况的:

! !最终用户优先,一旦遇到冲突,最终用户优先 ! !,! 其次是作者 !,其次是实现者,其次标准制定者,最后才是理论上的完满。

多读几遍 HTML5 设计原理,这才是纷繁世界背后的最终奥义。

推荐阅读更多精彩内容

  • div这个标签一直是我们见得最多、用得最多的标签。它本身无任何语义,用作布局以及样式化标签。 section与di...
    hanyuntao阅读 1,666评论 2 4
  • H5新增一些一些标签,section和article就是其中之一。这两个标签相对于div,语义性较强。 div本身...
    晴天小猪L阅读 148评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 106,429评论 12 127
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 144,168评论 18 620
  • 服务器是Centos系统,使用Jenkins部署android项目时遇到一些坑,特此记录一下。 环境准备 Jenk...
    ThinkNuo阅读 1,449评论 4 31