在HTML5标准中，<section>元素被定义为一个相关元素块。

<div>元素被定义为一个子元素块。

<div> Vs <Section>

第一轮

<div>: HTML元素(或HTML文档划分元素)是流内容的通用容器，它本身并不代表任何东西。它可以用于对元素进行分组，以实现样式化(使用class或id属性)，或者因为它们共享属性值，比如lang。只有当没有其他语义元素(如<article>或<nav>)是合适的时，才应该使用它。

<section>: HTML section元素(<section>)表示文档的通用部分，即内容的主题分组，通常带有标题。

第二轮

>:浏览器支持

<section>:浏览器支持

表中的数字指定完全支持该元素的第一个浏览器版本。

因此，div只从纯CSS或DOM的角度来看是相关的，而section也与语义相关，在不久的将来，还与搜索引擎的索引相关。

<section>标记定义文档中的节，例如章节、页眉、页脚或文档的任何其他节。

而:

<div>标记在HTML文档中定义了一个分区或节。

<div>标记用于将块元素分组以使用CSS格式化它们。

注意不要过度使用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包含另一个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中也是如此。

<div> -我们都知道并喜欢的通用流容器。它是一个块级元素，没有额外的语义含义(W3C:Markup, WhatWG)

<section> -通用文档或应用程序部分。A通常有一个标题(标题)，也可能有一个页脚。它是一大块相关内容，比如一篇长文章的一个小节，页面的一个主要部分(比如主页上的新闻部分)，或者web应用的标签界面中的一个页面。(W3C:标记,WhatWG)

我的建议: Div:使用较低版本(我认为4.01仍然)HTML元素(许多设计师处理)。 Section:最近出现的(html5) HTML元素。