javascript和JQuery焦点图和代码特效大全
当前最流行的开源CMS网站系统大全
当前位置:主页 > WEB前端 > CSS-HTML >

HTML5中的新标签article和section的区别

来源:IT技术网编辑:香独秀发布于:2013-07-24人围观标签HTML5区别articlesection

HTML5中的新标签article和section的区别:article,文章是一个独立的,单独的一段离散的内容。例如一篇博客的帖子,或者一个email中的单个email。

一篇博客中的帖子,可以由rss或者其他方法聚合,而不需要更多的上下文就有意义:

<article>
  <a href="#">
    <h1>feimos is world's sexiest man</h1>
    <p>guoguo is lovely.</p>
    <p>read more</p>
  </a>
 </article>

之前我们已经试过在博客帖子中添加评论使用的是article嵌套article的形式,这形式还可以用来表示视频的字幕。在规范中提到:“当嵌套了article元素,内部的article元素表示大体上与外围的article内容相关联的文章。”
section
section是“文档、页面、应用程序或站点的一个自包含部分,并由此专用于独立地分类或复用”。它将页面分节为不同主题区域,或者把文章划分为节。
请考虑以下这段标记:

 <h1>feimos的博客</h1>
 <h2>html5的大纲</h2>
 <p>HTML5有一个大纲算法……</p>
 <h2>html5的article元素</h2>
 <p>HTML5有一个新增的article元素……</p>
 <p><strong>以上内容很重要,要好好学习</strong></p>

“以上内容很重要……”,指整个feimos的博客下的内容,还是只是指“html5的article元素”下的内容很重要?使用HTML5的section元素,可以使其含义明确:

<article>
 <h1>feimos的博客</h1>
 <section>
  <h2>html5的大纲</h2>
  <p>HTML5有一个大纲算法……</p>
 </section>
 <section>
  <h2>html5的article元素</h2>
  <p>HTML5有一个新增的article元素……</p>
 </section>
 <p><strong>以上内容很重要,要好好学习</strong></p>
 </article>

这样就不再存在歧义,明显上例指的整个文章都很重要,如果把它放到第二个section里面,就变成只对第二个section内容有效了。
位于section中的article不只有article可以包含section,section也可以包含article。假设有一个内容区域划分成两个部分,一部分时关于骆驼的文章,其 它是关于蔬菜的文章。你不想分别标记骆驼和蔬菜的文章,但是你想要表现出它们是不同的话题,希望它们位于不同的栏中。在HTML4中,你需要无语义的 div。在HTML5中,将使用section,它像article一样,调用HTML5的大纲算法。

<section>
  <h1>Article about llamas</h1>
  <article>
    <h2>llama in black</h2>
    <p>blah blah</p>
  </article>
  <article>
    <h2>llama in white</h2>
    <p>blah blah</p>
  </article>
 </section>
 <section>
  <h1>Articles about vegetables</h1>
  <article>
    <h2>the green vegetables</h2>
    <p>blah blah</p>
  </article>
  <article>
    <h2>the blue vegetables</h2>
    <p>blah blah</p>
  </article>
 </section>

你可以想象一份报纸,报纸分很多版,每一版都是一个section,都包含若干article,每篇文章又可以分成一个或者多个section。并不是所有的页面都需要这些,但是以这种方式嵌套是完全可接受并且正确的。

标签,HTML5,区别,相关的文章
有时间的话来看看IT界的突发事件