HTML5带出了一系列新元素，并且将在未来被广泛应用。然而，有一些元素在使用时易被混淆，包括以下两个新元素：<article>和<section>。

在问答网站经常可以看到别人问：在什么情况下我们应该使用这些元素？我们应该如何正确的使用这些元素？<article>和<section>有什么区别？

鉴于以上的这些问题，E良师益友网为大家讲解一下<article>和<section>的区别：

一、Article元素

从名字上，它已经很好的诠释了自己，但是我们仍要看看官方文档上是如何描述它的：

“在文档，页面，应用或是站点上的一个独立部分，并且大体上，是可独立分配，或是重复使用的，例如在发布时。这个可以是论坛帖子，杂志或是新闻，博客条目，用户提交的评论，互动的小工具或小工具，或任何其他独立项目的内容。”

从上描述中，我们可以总结出<article>元素专用于结构化文章，特别是我们要发布的，例如博客，页面内容或是论坛帖子。

以下例子给出了如何使用<article>构建一个博客文章。

<articleclass="post">

<header>

<h2>ThisisBlogPostTitle</h2>

<divclass="post-meta">

<ul>

<liclass="author">AuthorName</li>

<liclass="categories">SaveinCategories</li>

</ul>

</div>

</header>

<divclass="post-content">

Sweetrollhalvahbiscuittoffeeliquoricetartpuddingsesamesnaps.

Biscuitpowderjelly-ofruitcakefaworkichocolatebar.Puddingoat

caketootsierollsesamesnapslollipopgingerbreadbonbon.Gummies

halvahgummiesdanishbiscuitapplicakegingerbreadjelly-opastry.

</div>

</article>

此外，<article>元素还可与section元素结合，需要的时候，可以使用<section>元素将文章分为几个段落，如下例所示。

<articleclass="post">

<header>

<h2>ThisisBlogPostTitle</h2>

<divclass="post-meta">

<ul>

<liclass="author">AuthorName</li>

<liclass="categories">SaveinCategories</li>

</ul>

</div>

</header>

<divclass="post-content">

<section>

<h3>ThisistheSub-Heading</h3>

Sweetrollhalvahbiscuittoffeeliquoricetartpuddingsesamesnaps.

Biscuitpowderjelly-ofruitcakefaworkichocolatebar.Puddingoatcake

tootsierollsesamesnapslollipopgingerbreadbonbon.Gummieshalvah

gummiesdanishbiscuitapplicakegingerbreadjelly-opastry.

</section>

<section>

<h4>ThisisanotherSub-Heading</h4>

Toppingcheesecakesweetpiecarrotcakesweetroll.Gummibearslemondrops

toffeesesamesnapstarttoppingchupachupsapplepiegummies.Waferchocolate

cake.Sugarplumchocolatebartoppingicecreamcarrotcakedanishbonbon.

Cheesecakegummibearsdragéejujubesdragéedragéebrowniejellybiscuit.Powdercroissantjellybeanspastry.

</section>

</div>

</article>

二、Section元素

这是一个最容易产生歧义的元素。它与<div>元素有什么区别？我们一直在用<div>来划分段落，所以除了<div>,我们什么时候使用这个元素。我们引用官方文档来阐述它。根据WHATWG文档，对<section>元素做了以下描述：

“<section>元素表示了一篇文档或应用中，通用段落–WHATWG”

从描述中我们可以看出<section>元素的作用就是分段，或多或少类似于<div>。但是它仍有一个特例。在文档中，加入了一段特别声明：

“当一个元素仅用于风格样式或是为了脚本的方便，我们鼓励作者使用<div>。<section>元素适用于，当元素的内容需要明确的列出时。-WHATWG”

基于这一点，我们可以总结以下两点：

尽管section元素在技术上是可以设计样式的，但是当有复杂的样式或脚本时，我们仍建议使用div元素。

类似于<li>元素，section元素是用来列举内容的。

因此在现实例子中，使用<section>元素的原因是结构化的列出博客的内容，代码如下：

<divclass="blog">

<sectionclass="post">

<h3class="post-title">BlogPostTitle</h3>

<pclass="post-excerpt">Icecreamtartpowderjelly-o.

Gummieschocolatecakeicecreamcookiehalvahtiramisujelly-o.</p>

</section>

<sectionclass="post">

<h3class="post-title">BlogPostTitle</h3>

<pclass="post-excerpt">Icecreamtartpowderjelly-o.

Gummieschocolatecakeicecreamcookiehalvahtiramisujelly-o.</p>

</section>

<sectionclass="post">

<h3class="post-title">BlogPostTitle</h3>

<pclass="post-excerpt">Icecreamtartpowderjelly-o.

Gummieschocolatecakeicecreamcookiehalvahtiramisujelly-o.</p>

</section>

</div>

这只是个例子，<section>元素也可以用作其他用途。

总结

如万维网的创始人和W3C的董事所预测的那般，所有HTML5创造出来的新元素都是为了是网络结构更加语义化。如何正确的应用这些元素在网络开发者和设计者之间，仍存有争论。最后，想学习HTML5的同学不妨去看看本站的HTML5+CSS3视频教程！