HTML5的article和section的区别

内容区块是指将HTML页面按逻辑分割后的单位。对于页面网站来说,导航菜单、文章正文、文章的评论等每一个部分都可称为内容区块。
     
  article元素
     
  article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件,或其他任何独立的内容。除了内容部分,一个article元素通常有它自己的标题(一般放在一个header元素里面),有时还有自己的脚注。
<article>
      <header>        
    <h1>标题</h1>
           <p>发表日期:<time pubdate="pubdate">2010/10/10</time></p>
  </header>

  <p>article的使用方法</p>
     
  <footer>
            <p><small>Copyright @ yiiyaa.net All Rights Reserverd</samll></p>
  </footer>
</article>
 
注:article元素是可以嵌套使用的,内层的内容在原则上需要与外层的内容相关联。例如,一篇博客文章中,针对该文章的评论就可以使用嵌套article元素的方式;用来呈现评论的article元素被包含在表示整体内容的article元素里面。
      
嵌套的代码如下:
<article>

  <header>
            <h1>article元素使用方法</h1>
    <p>发表日期:<time pubdate="pubdate">2010/10/10</time></p>
  </header>

  <p>此标签里显示的是article整个文章的主要内容,,下面的section元素里是对该文章的评论</p>
     
  <section>
            <h2>评论</h2>
    <article>
                  <header>
        <h3>发表者:maizi</h3>
        <p><time pubdate datetime="2016-6-14">1小时前</time></p>
      </header> 
      <p>这篇文章很不错啊,顶一下!</p>
           </article> 
    <article>
                  <header>           
        <h3>发表者:小妮</h3>
                        <p><time pubdate datetime="2016-6-14T:21-26:00">1小时前</time></p>
      </header>
    <p>这篇文章很不错啊,对article解释的很详细</p> 
    </article>
      </section>
</article>
     
  示例内容分为几个部分,文章标题放在了header元素中,文章正文放在了header元素后面的p元素中,然后section元素把正文与评论进行了区分(是一个分块元素,用来把页面中的内容进行区分),在section元素中嵌入了评论的内容,评论中每一个人的评论相对来说又是比较独立的、完整的,因此对它们都使用一个article元素,在评论的article元素中,又可以分为标题与评论内容部分,分别放在header元素与p元素中。
      
     
     
  1、section元素用于对网站或应用程序中页面上的内容进行分块,section元素的作用是对页面上的内容进行分块,或者说对文章进行分段,;

  2、一个section元素通常由内容及其标题组成。通常不推荐为那些没有标题的内容使用section元素,

  3、section元素并非一个普通的容器元素;当一个内容需要被直接定义样式或通过脚本定义行为时,推荐使用div而非section元素;

  4、如果article、nav、aside元素都符合某条件,那么就不要用section元素定义;

  5、section元素中的内容可以单独存储到数据库中或输出到word文档中。

  <section>
    <h1>section元素的</h1>标题
    <p>section区块的主题部分</p>
  </section>

在HTML5中,你可以将所有页面的从属部分,譬如导航条、菜单、版权说明等包含一个统一的页面中,以便统一使用CSS样式来进行装饰。最后,关于section元素的使用禁忌总结如下:
     
1)不要将section元素用作设置样式的页面容器,那是div元素的工作。
     
2)如果article元素、aside元素或nav元素更符合使用条件,不要使用section元素。
     
3)不要为没有标题的内容区块使用section元素。
     
三、两者的区别:

     
以上讲述了那么多,两者的区别到底是什么呢?事实上,在HTML5中,article元素可以看成是一种特殊类型的section元素,它比section元素更强调独立性。即section元素强调分段或分块,而article强调独立性。具体来说,如果一块内容相对来说比较独立的、完整的时候,应该使用article元素,但是如果你想将一块内容分成几段的时候,应该使用section元素。另外,在HTML5中,div元素变成了一种容器,当使用CSS样式的时候,可以对这个容器进行一个总体的CSS样式的套用。

时间: 2024-10-26 21:58:07

HTML5的article和section的区别的相关文章

html5:article与section元素

article元素 aiticle元素代表文档.页面或应用程序中独立的.完整的.可以肚子被外部引用的内容.它可以使一片博客或报刊中的文章.帖子. 一个article元素通常有它自己的标题,通常放在header元素里面,有时还有他的脚注.   Section元素 section元素用于对网站或应用程序中页面上的内容进行分块.一个section元素通常有内容及其标题组成.但section元素并非一个普通的容器元素:当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div而非section元素

html5 中的 article 和 section 元素

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

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

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

HTML5标签与HTML4标签的区别示例介绍_html5教程技巧

(1)概念的变化: HTML5专注内容与结构,而不专注的表现 <header> <hgroup>导航相关数据</hgroup> </header> <nav>菜单</nav> <article> <h1>标题:HTML5专题视频教程</h1> (2)声明与标签: HTML5在更多的声明和标签上面做了简化,也对兼容做了详细的规定,废除了部分元素,增加了部分元素. HTML5标签语法介绍及新增标记 1.

artice与section的区别

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body> <article> <header> <h1>我的个人资料</h1> </header> <p>我叫mudy,是个小学生&

好程序员web前端分享HTML5与HTML之间有什么区别?

好程序员web前端分享HTML5与HTML之间有什么区别?很多没有学过HTML5大前端的同学,对HTML5并不了解,经常会提出疑问:HTML5与传统HTML有什么区别?今天,就为大家讲一下两者比较明显几个区别.首先,HTML5已经远远超越了标记语言的范畴,它的设计目的是在移动设备上支持多媒体,和HTML比起来,深度和广度上都做了进一步提升. 接着,我们来看一下两者的声明文件类型: HTML:1.<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"

article和section

article和section都是指页面中的块,但是article更加强调独立性,而section常被用来分块. section使用禁忌: 1.不要把section当作定义样式的容器,因为那是div的工作: 2.使用section的时候,section容器内一定要包含h元素: 3.如果该元素更加符合article.nav等其他元素的定义,那就尽量不要使用section

HTML4,HTML5,XHTML 之间有什么区别?

我来从HTML的历史谈谈他们3者的区别. 在HTML的早期发展中,W3C成立之前,很多标准的制定都是在浏览器的开发者们互相讨论的情况下完成的,比如HTML 2.0, 3.2直到4.0, 4.01,这些标准大部分都是所谓的retro-spec,即先有实现后有标准.在这种情况下,HTML标准不是很规范,浏览器也对HTML页面中的错误相当宽容.这反过来又导致了HTML作者写出了大量的含有错误的HTML页面.据说,时至今日web上99%的页面都含有HTML错误. W3C随后意识到了这个问题,并认为这是互

HTML5之article元素与section元素之间的区别?

在HTML5中,为了使文档的结构更加清晰明确,追加了几个与页眉.页脚.内容区块等文档结构相关联的结构元素.内容区块是指将HTML页面按逻辑分割后 的单位.例如对于书籍来说,章.节可以称为内容区块:对于博客网站来说,导航菜单.文章正文.文章的评论等每一个部分都可称为内容区块.       在HTML5中新增的主体结构元素中有两个元素分别article元素与section元素,这两个元素是什么意思?通常用于哪些内容区块?何时用article元素?何时用section元素?两者之间的区别是什么?