article元素与section元素区别详解

为什么80%的码农都做不了架构师？>>>   

作者：潜行者M | 时间：2012年03月26日 | 原文地址： http://www.qianxingzhem.com/post-915.html

article元素与section元素是html5中新增的两种元素，它们的功能与div是一样的，都是用来区分不同区域，它们的使用方法也相似，因此有很多朋友会将其混用。html 5中之所以新增这两种元素，就是为了更好的描述文档的内容，所以它们之间肯定是有区别的。

article元素

article元素代表文档、页面或者应用程序中独立完整的可以被外部引用的内容。例如：博客中的一篇文章，论坛中的一个帖子或者一段浏览者的评论等。因为article元素是一段独立的内容，所以article元素中，通常包含头部（header元素）、底部（footer元素）。例如博客中的一篇文章的结构：

<article>
<header>
<h1>潜行者m的个人介绍</h1>
</header>
<p>潜行者m是一个男的中国人。。。。。</p>
<footer>
<p>潜行者m版权所有</p>
</footer>
</article>

section元素

section元素用于对网站或者应用程序中页面上的内容进行分块。一个section元素通常由内容以及标题组成。例如：

<section>
<h1>潜行者m的个人介绍</h1>
<p>潜行者m是一个男的中国人。。。。。。</p>
</section>

从上例可以看出，section元素中，需要包含一个<hn>标题元素，而一般不用包含头部（header元素）或者底部（footer元素）。通常用section元素为那些有标题的内容进行分段。

section元素的作用，是对页面上的内容分块处理，例如对文章分段等，相邻的section元素的内容，应当是相关的，而不是像article那样独立。例如一篇文章：

<article>
<header>
<h1>潜行者m喜欢的科技公司</h1>
</header>
<p>本文中，潜行者m列举了一下他喜欢的科技公司。。</p>
<section>
<h2>google公司</h2>
<p>著名的搜索引擎公司。。。</p>
</section>
<section>
<h2>苹果公司</h2>
<p>非常能创新的公司。。</p>
</section>
<footer>
<p>版权所有，翻版不咎</p>
</footer>
</article>

通过上面的例子，你应该能感受到article元素与section元素的区别。事实上article元素可以看做是特殊的section元素。article元素更强调独立性、完整性，section更强调相关性。

一个比较完整的例子

<article>
<header>
<h1>潜行者m的个人介绍</h1>
</header>
<p>潜行者m是一个中国男人，是一个帅哥。。。。</p>
<section>
<h2>评论</h2>
<article>
<h3>评论者：潜行者n</h3>
<p>确实，m同学真的很帅</p>
</article>
<article>
<h3>评论者：潜行者a</h3>
<p>M今天吃药了没？</p>
</article>
</section>
</article>

article、section与div的区别

既然article、section是用来划分区域的，又是html 5的新元素，那么我可不可以用article、section来取代div，用来布局网页呢？如果你真打算这样做，那么你就像使用ul来打造表格（table）一样愚蠢。div的用处就是用来布局网页，划分大的区域，只是html 4中，只有div、span来划分区域，所以我们就习惯性的把div当成了一个容器。而html 5改变了这个，它让div的工作更纯正。div就是用来布局大块，在不同的内容块中，我们按照需求添加article、section等内容块，并且显示其中的内容，这样才是合理的使用这些元素。

转载于:https://my.oschina.net/qxzm/blog/51302