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等內容塊，而且顯示其中的內容，這樣纔是合理的使用這些元素。