HTML5中新增了<header>、<footer>、<nav>、<section>、<article>、<aside>、<
figure>多个有语义的
结构化标签元素。其中section和article这两个
标签和div差不多
功能,很容易混淆。
div(分区division)
这个
标签是我们见得最多、用得最多的
一个标签,以至于Div+CSS成了HTML网页设计的标准。本身没有任何语义,用作布局以及样式化或脚本的钩子。
HTML Spec:The div element has no special
meaning at al
l.
section(章节)
简单地说section就是带有语义的div,<div class="section"></div>相当于<section id=""></section>。
section表示一段专题性的
内容,一般会带有
标题。当
一个标签只是为了样式化或者方
便脚本使用时,应该使用div。一般来说,当元素
内容明确地出现在文档大纲、
文章章节、
博客条目、@L_
616_15@
评论部分或者论文中有编号的部分时,section就是适用的。
article是
一个特殊的section
标签,它比section具有更明确的语义,它代表
一个独立的、完整的相关
内容块。
article代表的
内容可以被外部引用。例如:
博客中的一篇
文章,论坛中的
一个帖子或者一段浏览者的
评论等。如果元素的
内容集中到一起
显示可以表达相对独立完整的意思,那就可以定义成article。
nav和aside的使用也是如此,这两个
标签也是特殊的section。