html5新标签article,section。使用中与div,p的区别

发表于:
来源:阿酷技术学习
作者:simplefastbest

从语义上来理解,article表示文章,section表示章节,div表示层,p表示段落。

看规范:

div:The divelement has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements. It can also be used in a dl element, wrapping groups of dt and ddelements.

div是我们用得最多的一个标签,它根本没有什么特别的意思,经常用作布局,它能够通过指定属性class,lang,title来表示语义。它也能够用在dl元素里,包裹dt和dd元素。

section:The section element representsa generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

section是html5的一个新标签,它通常表示一个document广泛意义上的节.在一个context里,一个节表示具有某一主题内容的组,代表性的表示就是有一个heading.

article:The article element representsa complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable

article也是html5的一个新标签。它表示一篇文档,网页或站点应用的完整的独立的或者自包含的组合。原则上它可以独立分发或重用。特别注意,它可以自包含,看以下代码:article还可以有article

<article itemscope itemtype="http://schema.org/BlogPosting">
 <header>
  <h1 itemprop="headline">The Very First Rule of Life</h1>
  <p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
  <link itemprop="url" href="?comments=0">
 </header>
 <p>If there's a microphone anywhere near you, assume it's hot and
 sending whatever you're saying to the world. Seriously.</p>
 <p>...</p>
 <section>
  <h1>Comments</h1>
  <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c1">
   <link itemprop="url" href="#c1">
   <footer>
    <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
     <span itemprop="name">George Washington</span>
    </span></p>
    <p><time itemprop="commentTime" datetime="2009-10-10">15 minutes ago</time></p>
   </footer>
   <p>Yeah! Especially when talking about your lobbyist friends!</p>
  </article>
  <article itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="c2">
   <link itemprop="url" href="#c2">
   <footer>
    <p>Posted by: <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
     <span itemprop="name">George Hammond</span>
    </span></p>
    <p><time itemprop="commentTime" datetime="2009-10-10">5 minutes ago</time></p>
   </footer>
   <p>Hey, you have the same first name as me.</p>
  </article>
 </section>
</article>

我的理解:一篇文章(article)有header(标题,署名,发表时间),有章节(section,相同的主旨内容),章节中有段落(p)。