article在html中作用

section元素和article元素的区别？

1、div表示一个布局容器，本身没有任何语义，用作布局以及样式化或脚本的钩子(hook)。

<div>this is a div </div>。

2、section 表示一段专题性的内容，一般会带有标题。

section 应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一个网站的主页可以分成简介、新闻和联系信息等几部分。其实我对这里传达信息很感兴趣，因为感觉 section 和下面要介绍的 artilce 更加适用于模块化应用，这个话题以后会出篇专门的文章来讨论，这里暂时略过。

<section> 。

<h1>Granny Smith</h1> 。

<p>These juicy, green apples make a great filling for apple pies.</p> 。

</section>。

3、article 是一个特殊的 section 标签，它比 section 具有更明确的语义, 它代表一个独立的、完整的相关内容块。

一般来说， article 会有标题部分(通常包含在 header 内)，有时也会 包含 footer 。虽然 section 也是带有主题性的一块内容，但是无论从结构上还是内容上来说，article 本身就是独立的、完整的。

<article> 。

<header>。

<h1>The Very First Rule of Life</h1> 。

<p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p> 。

</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> 。

<footer> 。

<a href="?comments=1">Show comments...</a> 。

</footer> 。

</article>。

当元素内容聚合起来更加言之有物时，应该使用 article 来替换 section 。

html5中article与section有什么区别？

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

在HTML5中新增的主体结构元素中有两个元素分别article元素与section元素，这两个元素是什么意思？通常用于哪些内容区块？何时用article元素？何时用section元素？两者之间的区别是什么？

一、article元素。

article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。除了内容部分，一个article元素通常有它自己的标题（一般放在一个header元素里面），有时还有自己的脚注。

现在，以博客为例来看一段关于article元素的代码示例，代码如下：

<article>。

<header>。

<h1>article元素使用方法</h1>。

<p>发表日期：<time pubdate="pubdate">2010/10/10</time></p>。

</header>。

<p>article元素是什么？怎样使用article元素？……</p>。

<footer>。

<p><small>Copyright @ yiiyaa.net All Rights Reserverd</samll></p>。

</footer>。

</article>。

这个示例是一篇讲述article元素使用方法，在header元素中嵌入了文章的标题部分，在标题下部的p元素中，嵌入了一大段该博客文章的正文，在结尾处的footer元素中，嵌入了文章的著作权，作为脚注。整个示例的内容相对比较独立、完整，因此，对这部分内容使用了article元素。

article元素是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联。例如，一篇博客文章中，针对该文章的评论就可以使用嵌套article元素的方式；用来呈现评论的article元素被包含在表示整体内容的article元素里面。

接着，来看一个关于article元素嵌套的代码示例，代码如下：

<article>。

<header>。

<h1>article元素使用方法</h1>。

<p>发表日期：<time pubdate="pubdate">2010/10/10</time></p>。

</header>。

<p>article元素是什么？怎样使用article元素？……</p>。

<section>。

<h2>评论</h2>。

<article>。

<header>。

<h3>发表者：shenmiweiyi</h3>。

<p><time pubdate datetime="2011-12-23T:21-26:00">1小时前</time></p>。

</header>。

<p>这篇文章很不错啊，顶一下！</p>。

</article>。

<article>。

<header>。

<h3>发表者：神秘唯一</h3>。

<p><time pubdate datetime="2011-12-23T:21-26:00">1小时前</time></p>。

</header>。

<p>这篇文章很不错啊，对article解释的很详细</p>。

</article>。

</section>。

</article>。

这个示例中的内容比上述代码更加完整了，它添加了文章读者的评论内容，示例内容分为几个部分，文章标题放在了header元素中，文章正文放在了header元素后面的p元素中，然后section元素把正文与评论进行了区分（是一个分块元素，用来把页面中的内容进行区分），在section元素中嵌入了评论的内容，评论中每一个人的评论相对来说又是比较独立的、完整的，因此对它们都使用一个article元素，在评论的article元素中，又可以分为标题与评论内容部分，分别放在header元素与p元素中。

另外，article元素也可以用来表示插件，它的作用是使插件看起来好像内嵌在页面中一样。代码如下：

<article>。

<h1>一个插件</h1>。

<object>。

<param name="allowFullScreen" vlaue="true">。

<embed src="#" width="600" height="395"></embed>。

</object>。

</article>。

二、section元素。

section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素；当一个内容需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。section元素中的内容可以单独存储到数据库中或输出到word文档中。

<section>。

<h1>section元素使用方法</h1>。

<p>什么时候用section元素？怎样合理使用section元素?</p>。

</section>。

通常不推荐为那些没有标题的内容使用section元素，可以使用HTML5轮廓工具来检查页面中是否有标题 的section，如果使用该工具进行检查后，发现某个section的说明中有"untitiled section"（没有标题的section）文章，这个section就有可能使用不当。

section元素的作用是对页面上的内容进行分块，或者说对文章进行分段，请不要与有着自己的完整的、独立的内容”的article元素混淆。

下面，来看article元素与section元素结合使用的示例，希望能够帮助你更好地理解article元素与section元素的区别。

<article>。

<h1>article元素与section元素的使用方法</h1>。

<p>何时使用article元素？何时使用section元素…..</p>。

<section>。

<h2>article元素使用方法</h2>。

<p>article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。</p>。

</section>。

<section>。

<h2>section元素使用方法</h2>。

<p> section元素用于对网站或应用程序中页面上的内容进行分块。</p>。

</section>。

</article>。

上述代码中的内容首先是一段独立的、完整的内容，因此使用article元素。该文章分为3段，每一段都有一个独立的标题，因此使用了两个section元素。请记住，对文章分段的工作也是使用section元素完成的。可能有人会问，为什么没有对第一段使用section元素，这里其实是可以使用section元素的，但是由于其结构比较清晰，分析器可以识别第一段内容在一个section元素里，所有也可以将第一个section元素省略，但是第一个section元素里还要包含于section元素或子article元素，那么就必须写明第一个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样式的套用。

HTML5 里 section article 什么区别

html5的新增的标签都是带有语义的，不光要从字面来说，还要从举例中来说。

article 是独立的一块内容，比如一篇新闻，一篇文章，包含文章主旨，还可以包含辅助内容。

section 类似div，不过比div更有意义，他是对内容进行分块。

aside 字面就是侧边栏，跟内容相关的一些引用、内容。

这些元素表现形式都是行内，使用的时候要显示声明为block。

HTML5的语义化标签有哪些，作用是什么

HTML5中新增了<header>、<footer>、<nav>、<section>、<article>、<aside>、<figure>多个有语义的结构化标签元素。其中section和article这两个标签和div差不多功能，很容易混淆。

1、section（章节）

简单地说section就是带有语义的div，比如：

<div class="section"></div>相当于<section id=""></section>。

section表示一段专题性的内容，一般会带有标题。当一个标签只是为了样式化或者方便脚本使用时，应该使用div。一般来说，当元素内容明确地出现在文档大纲、文章章节、博客条目、用户评论部分或者论文中有编号的部分时，section就是适用的。

2、article（文章）

article是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块。

article代表的内容可以被外部引用。例如：博客中的一篇文章，论坛中的一个帖子或者一段浏览者的评论等。如果元素的内容集中到一起显示可以表达相对独立完整的意思，那就可以定义成article。

3、nav 和 aside的使用也是如此，这两个标签也是特殊的 section，在使用 nav 和 aside 更合适的情况下，也不要使用 section 了。

HTML5

标签

标签种类：

<header>：定义页眉。

<nav>：定义导航。

<section>：定义文档中的区段。

<time>：定义日期和时间。

<article>：定义文章。

<aside>：定义文章的侧边栏。

<figure>：定义一组媒体对象以及文字。

<figcaption>：定义figure的标题。

<footer>：定义页脚。

标签作用：

header与footer标签用于表示页面、应用或某个模块的头部和尾部；

nav用于表示导航；

article标签表示文章；

aside标签和article标签用法类似，只是表示内容会出现在侧边栏；

figure标签表示一段自包含的内容——独立的流内容（图像、图标、照片、代码等）

在开发当中，可以使用section和article标签替代过度的div标签，用这些标签来对页面进行内容划分。

想了解更多，可点击《如何让旧浏览器支持HTML5新标签》

原文地址：http://www.qianchusai.com/article%E5%9C%A8html%E4%B8%AD%E4%BD%9C%E7%94%A8.html