<section>和<div>有什么区别？

最新推荐文章于 2026-03-09 20:13:28 发布

翻译最新推荐文章于 2026-03-09 20:13:28 发布 · 786 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://oldbug.net/q/T7NI/What-is-the-difference-between-section-and-div

标签

#html5 #html

本文详细对比了HTML5中<section>和<div>元素的使用场景和语义差异。<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>`

 <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文档主要区域的能力。