article元素与section元素是html5中新增的两种元素，它们的功能与div是同样的，都是用来区分不一样区域，它们的使用方法也类似，所以有不少朋友会将其混用。html 5中之因此新增这两种元素，就是为了更好的描述文档的内容，因此它们之间确定是有区别的。html
article元素
article元素表明文档、页面或者应用程序中独立完整的能够被外部引用的内容。例如：博客中的一篇文章，论坛中的一个帖子或者一段浏览者的评论等。由于article元素是一段独立的内容，因此article元素中，一般包含头部（header元素）、底部（footer元素）。例如博客中的一篇文章的结构：html5
<article>
<header>
<h1>潜行者m的我的介绍</h1>
</header>
<p>潜行者m是一个男的中国人。。。。。</p>
<footer>
<p>潜行者m版权全部</p>
</footer>
</article>布局
section元素
section元素用于对网站或者应用程序中页面上的内容进行分块。一个section元素一般由内容以及标题组成。例如：post
<section>
<h1>潜行者m的我的介绍</h1>
<p>潜行者m是一个男的中国人。。。。。。</p>
</section>网站
从上例能够看出，section元素中，须要包含一个<hn>标题元素，而通常不用包含头部（header元素）或者底部（footer元素）。一般用section元素为那些有标题的内容进行分段。搜索引擎
section元素的做用，是对页面上的内容分块处理，例如对文章分段等，相邻的section元素的内容，应当是相关的，而不是像article那样独立。例如一篇文章：google
<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>spa
经过上面的例子，你应该能感觉到article元素与section元素的区别。事实上article元素能够看作是特殊的section元素。article元素更强调独立性、完整性，section更强调相关性。htm
一个比较完整的例子
<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等内容块，而且显示其中的内容，这样才是合理的使用这些元素。