html5之div，article，section区别与应用

近来，发现自己编码有个问题，对article，div，section有些乱用，索性就好好了解下他们的区别，写个文章，好好的科普一下……

div:

hello，大家好。我叫div，对应英文单词中的division，我是块级元素，就是在我里面的内容会自动开始新行，可以定义文档中的分区或节，把文档分割成独立，不同的部分，我参加的国际会议是这么介绍我的，“The div element  has no special meaning at all”。很高兴我在能被很多人看重，发挥着极大的作用，但我还是有自知之明的，本身没有什么语义的，更适合帮你们布局，进行样式化。

section：

hello，ladies and gentlemen，我是section。我参加的国际会议，是这么介绍我的，“The section element represents a generic section of a document or application. A section , in this context, is a thematic grouping of content, typically with a heading.” 我是带有语义的div，“Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.”我出席的场景一般是有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一个网站的主页可以分成简介、新闻和联系信息等几部分。我不仅仅是一个普通的容器标签。当一个标签只是为了样式化或者方便脚本使用时，应该去找我的朋友 div 。一般来说，当元素内容明确地出现在文档大纲中时，我是很好的人选。通常会带有标题，<section><h1></h1><p></p></section>。我会用于对网站或者应用程序中页面上的内容进行分块。

article：

同志们好，我是article，是特殊的section，我比section具有更明确的语义，是一个独立的、完整的相关内容块的代表。一般来说， 我会有标题部分(通常包含在 header 内)，有时也会 包含 footer 。虽然 section 也是带有主题性的一块内容，但是无论从结构上还是内容上来说，我本身就是独立的、完整的，代表文档、页面或者应用程序中独立完整的可以被外部引用的内容。例如：博客中的一篇文章，论坛中的一个帖子或者一段浏览者的评论等。因为article元素是一段独立的内容，所以article元素中，通常包含头部（header元素）、底部（footer元素）。

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

  <article>      <header><h1>计算机各类语言介绍</h1></header>      <p>本文列举了部分计算机语言的一些介绍</p>      <section>        <h2>JavaScript</h2>        <p>js是一门……</p>      </section>      <section>        <h2>HTML</h2>        <p>HTML是一门……</p>      </section>      <footer>版权归微也所有</footer>    </article>

    很多人会说，要丢弃div,用html5的section，article，都是划分区域，不是说推荐用语义化标签么，来布局网页。咳咳咳，之前我就有这么想过，可是这就好像将ul代替table似的，也有说，尽量少用table，但是该用table还是要用的，放着方便快捷的table不用，我跑去用ul来打造表格，这似乎并不明智。该用div还是用div，进行网页布局，得有个规范，至少自己有个规范，然后让其他人也能看得懂。其实三者说实在，也并没有什么差别，个人觉得，只是section，article更语义化了。

这就是我这篇文章想说的，也是对自己说的，敬请交流哈！