HTML5 中 div 和section以及 article 的不同之处

HTML5 中 div section article 的区别

刚刚开始接触 HTML5 时,对它的标签很不适应,甚至一度有点反感。尤其是对 div、section、article 这几个标签,实在弄不清楚应该使用在什么场合下。
div标签
这个标签是我们见得最多、用得最多的一个标签。本身没有任何语义,用作布局以及样式化。

section标签
与 div 的无语义相对,简单地说 section 就是带有语义的 div 了,但是千万不要觉得真得这么简单。section 表示一段专题性的内容,一般会带有标题。看到这里,我们也许会想,到底section 应该什么时候用呢?section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。其实感觉 section 和 artilce 更加适用于模块化应用。section 不仅仅是一个普通的容器标签。当一个标签只是为了样式化或者方便脚本使用时,应该使用 div 。一般来说,当元素内容明确地出现在文档大纲中时,section 就是适用的。

article标签
article 是一个特殊的 section 标签,它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。一般来说, article 会有标题部分(通常包含在 header 内),有时也会 包含 footer 。虽然 section 也是带有主题性的一块内容,但是无论从结构上还是内容上来说,article 本身就是独立的、完整的。
当 article 内嵌 article 时,原则上来说,内部的 article 的内容是和外层的 article 内容是相关的。例如,一篇博客文章中,包含用户提交的评论的 article 就应该潜逃在包含博客文章 article 之中。

总结
div section article ,语义是从无到有,逐渐增强的。div 无任何语义,仅仅用作样式化。对于一段主题性的内容,则就适用 section,而假如这段内容可以脱离上下文,作为完整的独立存在的一段内容,则就适用 article。原则上来说,能使用 article 的时候,也是可以使用 section 的,但是实际上,假如使用 article 更合适,那么就不要使用 section 。

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

时间: 2024-10-20 05:30:18

HTML5 中 div 和section以及 article 的不同之处的相关文章

HTML5 中 div section article 的区别

刚刚开始接触 HTML5 时,对它的标签很不适应,甚至一度有点反感.尤其是对 div.section.article 这几个标签,实在弄不清楚应该使用在什么场合下. div HTML Spec: The div element has no special meaning at all. 这个标签是我们见得最多.用得最多的一个标签.本身没有任何语义,用作布局以及样式化或脚本的钩子(hook). section HTML Spec: “The section element represents

详解HTML5中的<aside>元素与<article>元素

<aside>元素HTML<aside>元素表示一个页面的一部分, 它的内容跟这个页面的其它内容的关联性不强,或者是没有关联,单独存在.<aside>元素通常显示成侧边栏(sidebar)或一些插入补充内容.通常用来在侧边栏显示一些定义,比如目录.索引.术语表等:也可以用来显示相关的广告宣传,作者的介绍,Web应用,相关链接,当前页内容简介等. <aside>元素使用注意事项: 不要使用<aside>元素标记括号中的文字,因为这种类型的文本被认为

使用HTML5中新增结构元素来构建网页

HTML5中新增了几个结构元素(section元素.article元素.nav元素.aside元素.header元素和footer元素),通过运用这些结构元素,可以让网页的整体结构更加直观和明确.更加具有语义化和更具有现代风格. 1.组织网页结构 在一个用HTML5实现的网页中,每一个网页都将由一些主体结构元素构成. 在大型的网站中,一个网页通常有以下几个结构元素组成: header结构元素:通常用来展示网站的标题.企业或公司的Logo图片.广告(Flash等格式).网站导航条等. aside结

html5 中的 article 和 section 元素

HTML5带出了一系列新元素,并且将在未来被广泛应用.然而,有一些元素在使用时易被混淆,包括以下两个新元素:<article>和<section>. 最常被问起的问题是:在什么情况下我们应该使用这些元素?以及我们应该如何正确的使用这些元素? Article元素 从名字上,它已经很好的诠释了自己,但是我们仍要看看官方文档上是如何描述它的: "在文档,页面,应用或是站点上的一个独立部分,并且大体上,是可独立分配,或是重复使用的,例如在发布时.这个可以是论坛帖子,杂志或是新闻,

HTML5新元素section和article的区别详解

HTML5带出了一系列新元素,并且将在未来被广泛应用.然而,有一些元素在使用时易被混淆,包括以下两个新元素:<article>和<section>. 在问答网站经常可以看到别人问:在什么情况下我们应该使用这些元素?我们应该如何正确的使用这些元素?<article>和<section>有什么区别? 鉴于以上的这些问题,E良师益友网为大家讲解一下<article>和<section>的区别: 一.Article元素 从名字上,它已经很好的

html中DIV+CSS与TABLE布局方式的区别及HTML5新加入的结构标签(转)

DIV与TABLE布局的区别 div 和 table 的加载方式不同,div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少:table 的加载方式是完成后加载,遇到 <table> 后,在读</table> 之前,table 中的内容不加载,或者传输中断了的时候加载,这是因为TABLE牵涉到多行多列问题,所以只有当TABLE所有内容加载完毕,浏览器才知道该怎么显示 . div与css配合使

H5中section和article标签之间的区别

大家都知道,H5最大的特点就是标签语义化,可以使我们和浏览器更好的理解结构与阅读,section和article就是两只新的语义化标签.这两个标签的使用结构就是都有标题和内容主体,那么如何在使用过程中区分它们呢?下面就说一下我自己的小见解. 我们在阅读一本书籍的时候,通常在目录检索中看到以下结构,如下: 第一章 第一节 第二节 第三节 第二章 第二节 第三节 第三章 第四章 从上面的目录结构中可以看出,第一章和第二章中有小节,第三章和第四章为单独的一片文章.大章节中的小节为该章节的小分支,虽然有

HTML5中最看重的理念“语义化”相比HTML有什么区别?

这里搜集整理了一些语义化标签方面的问题和解答,以供大家参考. 语义化这个概念应该说是伴着HTML5应运而生,那么什么是HTML5中所谓的语义化? 简单来说就是:描述内容的含义(meaning) 比如说<p>标签就是段落的意思,在HTML5中所有的标签都有它书面上的语义.而没有语义的标签在HTML中有,在HTML5中就没有了,比如<font>标签.而HTML5又为了补充HTML现在的不足而加上了一些新的标签,如<article>.<footer>.<he

html5中的一些标签学习总结

html5 contenteditable="true" html5内容可编辑属性 html5 hgroup hgroup字面意思是头部的组,可以将其分拆为h和group来理解.在html5中的作用是用于对网页和区块的标题进行组合.(网页是一个最大的区块,所以可以认为hgroup是区块的标题的组合)前面的文章有提到header元素,貌似这个元素跟hgroup有非常相似的功能,那么它们之间有什么不同呢?继续从hgroup的定义来看,它是对"标题"的组合,html中的标