section和div有什么区别？

本文翻译自：What is the difference between and

What is the difference between <section> and <div> in HTML? HTML中的<section>和<div>什么区别？ Aren't we defining sections in both cases? 我们不是在两种情况下定义部分吗？

#1楼

参考：

#2楼

Just an observation - haven't found any documentation corroborating this 只是一个观察 - 没有找到任何证实这一点的文件

If a section contains another section, a h1-header in the inner section is displayed in a smaller font than a h1- header in outer section. 如果某个部分包含另一个部分，则内部部分中的h1标题将以比外部部分中的h1-标题更小的字体显示。 When using div instead of section the inner div h1-header is diplayed as h1. 当使用div而不是section时，内部div h1-header被显示为h1。

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

-- the Level2 - header is displayed in a smaller font than the Level1 - header. - Level2 - 标题以比Level1 - 标题更小的字体显示。

When using css to color h1 header, the inner h1 were also colored (behaves as regular h1). 当使用css为h1标题着色时，内部h1也被着色（表现为常规h1）。 It's the same behaviour in Firefox 18, IE 10 and Chrome 28. 这与Firefox 18，IE 10和Chrome 28中的行为相同。

#3楼

`<div> Vs <Section>`

Round 1 第1轮

<div>: The element (or HTML Document Division Element) is the generic container for flow content, which does not inherently represent anything. <div>: 元素（或HTML文档分割元素）是流内容的通用容器，它本身并不代表任何内容。 It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. 它可用于将元素分组以用于样式目的（使用class或id属性），或者因为它们共享属性值，例如lang。 It should be used only when no other semantic element (such as <article> or <nav> ) is appropriate. 只有在没有其他语义元素（例如<article>或<nav> ）合适时才应该使用它。

<section>: The Section element ( <section> ) represents a generic section of a document, ie, a thematic grouping of content, typically with a heading. <section>: Section元素（ <section> ）表示文档的通用部分，即内容的主题分组，通常带有标题。

Round 2 第2轮

<div>: Browser Support <div>: 浏览器支持

<section>: Browser Support <section>: 浏览器支持

The numbers in the table specifies the first browser version that fully supports the element. 表中的数字指定了完全支持该元素的第一个浏览器版本。

In that vein, a div is relevant only from a pure CSS or DOM perspective, whereas a section is relevant also for semantics and, in a near future, for indexing by search engines. 在这种情况下，div仅与纯CSS或DOM视角相关，而section也与语义相关，并且在不久的将来也与搜索引擎进行索引相关。

#4楼

The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document. <section>标记定义文档中的部分，例如章节，页眉，页脚或文档的任何其他部分。

whereas: 然而：

The <div> tag defines a division or a section in an HTML document. <div>标签定义HTML文档中的分区或部分。

The <div> tag is used to group block-elements to format them with CSS. <div>标签用于对块元素进行分组，以使用CSS对其进行格式化。

#5楼

In the HTML5 standard, the <section> element is defined as a block of related elements. 在HTML5标准中， <section>元素被定义为相关元素的块。

The <div> element is defined as a block of children elements. <div>元素被定义为子元素块。

#6楼

Take caution not to overuse the section tag as a replacement for a div element. 请注意不要过度使用section标记作为div元素的替代。 A section tag should define a significant region within the context of the body . section标签应该定义正文上下文中的重要区域。 Semantically, HTML5 encourages us to define our document as follows: 从语义上讲，HTML5鼓励我们按如下方式定义文档：

 <html> <head></head> <body> <header></header> <section> <h1></h1> <div> <span></span> </div> <div></div> </section> <footer></footer> </body> </html>

This strategy allows web robots and automated screen readers to better understand the flow of your content. 此策略允许Web机器人和自动屏幕阅读器更好地了解您的内容流。 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. 应限制section标记以解释包含唯一内容的位置。 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标签中，我们应该继续使用层次结构中较低的HTML标记来标记和控制内容，例如h1 ， div ， span等。

In most simple pages, there should only be a single section tag, not multiple ones. 在大多数简单页面中，应该只有一个节标记，而不是多个标记。 Please also consider also that there are other interesting HTML5 tags which are similar to section . 另请注意，还有其他有趣的HTML5标签与部分类似。 Consider using article , summary , aside and others within your document flow. 考虑在文档流程中使用文章，摘要，旁边和其他内容。 As you can see, these tags further enhance our ability to define the major regions of the HTML document. 如您所见，这些标记进一步增强了我们定义HTML文档主要区域的能力。