注意不要过度使用section标记来替换div元素。section标记应该在正文上下文中定义一个重要区域。从语义上讲，HTML5鼓励我们这样定义文档:

< html > <头> < / >头 身体< > <标题> < /头> < >节 <标题> < / h1 > < div > < span > < / span > < / div > < div > < / div > < / >节 <页脚> < /页脚> 身体< / > < / html >

This strategy allows web robots and automated screen readers to better understand the flow of your content. This markup clearly defines where your major page content is contained. Of course, headers and footers are often common across hundreds if not thousands of pages within a website. The section tag should be limited to explain where the unique content is contained. Within the section tag, we should then continue to markup and control the content with HTML tags which are lower in the hierarchy, like h1, div, span, etc.

在大多数简单的页面中，应该只有一个section标记，而不是多个。还请考虑还有其他有趣的HTML5标签，它们与section类似。考虑在文档流中使用article、summary、aside等。如您所见，这些标记进一步增强了我们定义HTML文档主要区域的能力。

使用<section>可能更整洁，有助于屏幕阅读器和SEO，而<div>的字节更小，打字更快

总的来说差别很小。

另外，不建议将<section>放在<section>中，而是将<div>放在<section>中

section标记为html提供了更具语义性的语法。Div是节的通用标记。 当你为适当的内容使用节标签时，它也可以用于搜索引擎优化。Section标记还使HTML解析变得容易。更多信息，请参考。http://blog.whatwg.org/is-not-just-a-semantic

<section>标记一个section， <div>标记一个没有关联语义的泛型块。

<节> < / >节

元素的泛型部分 文档，即内容的主题分组，通常带有 标题。每个<section>都应该被标识，通常包括 标题(<h1>-<h6>元素)作为<section>的子元素 元素。详情请按以下连结。

引用:

http://www.w3schools.com/tags/tag_section.asp https://developer.mozilla.org/en/docs/Web/HTML/Element/section

<div></div>

HTML <div>元素(或HTML文档分区元素)是 流内容的通用容器，它本身不是 代表任何东西。它可用于对元素进行样式化分组 目的(使用class或id属性)，或者因为它们共享 属性值，例如lang。只有在没有其他方法的情况下才可以使用 语义元素(如<article>或<nav>)是合适的。

引用: ——http://www.w3schools.com/tags/tag_div.asp ——https://developer.mozilla.org/en/docs/Web/HTML/Element/div

这里有一些链接，更多地讨论了它们之间的区别:

http://html5doctor.com/avoiding-common-html5-mistakes/ https://teamtreehouse.com/community/use-div-or-section-element http://webdesign.about.com/od/html5tags/fl/div-vs-section.htm

这只是一个观察，还没有发现任何文件可以证实这一点

如果一个section包含另一个section，内部section的h1-header将以比外部section的h1-header更小的字体显示。 当使用div而不是section内部div h1-header显示为h1。

<section>
  <h1>Level1</h1>
  some text
  <section>
    <h1>Level2</h1>
    some more text
  </section>
</section>

二级标题显示的字体比一级标题小。

当使用css为h1标题上色时，内部h1也被上色(行为与常规h1相同)。 在火狐18、IE 10和Chrome 28中也是如此。