Question

div，section，article的区别和使用

Answer 1

div、section、article的区别和使用，有需要的朋友可以参考下。

在进行HTML5的编写时，会对div、section、article的使用混淆，经过查阅相关的资料，以及自己的总结，得出div、section、article的区别。

1、什么时候使用

（1）div：作为布局以及样式化时使用；

（2）section：表示文档中的节,一般是具有标题的。如：文档大纲、文章章节、博客条目、用户评论部分或者论文中有编号的部分时使用；

通常会带有标题。如果没有标题，那么就不推荐使用section。
<section>
<h1>文章章节小标题</h1>
<p>文章章节内容</p>
</section>

（3）article：表示独立的自包含内容，如：一篇文章。文章中可包含标题、内容、脚注
<article>
<header>
<h1>文章标题</h1>
</header>
<p>文章内容</p>
</article>

2、示例
<article>
<header>
<h1>文章标题</h1>
<p><time datetime="2014-03-28">发表时间</time>
</p>
</header>
<p>文章正文</p>
<section>
<h2>文章评论</h2>
<article>
<header>
<h3>发表者：lanyf</h3>
<p><time datetime="2014-03-28">10:13</time></p>
</header>
<p>评论内容</p>
</article>
</section>
</article>
注：
1、<header>：定义文档的页面（介绍信息），如文章标题，发表时间
2、article和section是可以嵌套使用的
3、为什么在section中可以嵌套使用article，拿示例中的代码来解释
（1）评论是文章的一个节，所以使用section
（2）而每一个用户的评论是相对独立的内容，所以每一个用户的评论用article