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

【问题标题】：What is the difference between <section> and <div>?<section> 和 <div> 有什么区别？
【发布时间】：2021-08-04 11:44:51
【问题描述】：

HTML 中的<section> 和<div> 有什么区别？
我们不是在这两种情况下都定义了部分吗？

【问题讨论】：

另见：Using section element for stylistic layout and wrappers

标签： html

【解决方案1】：

<section> 表示里面的内容是分组的（即与单个主题相关），并且应该作为条目出现在页面的轮廓中。

另一方面，<div> 除了在其 class、lang 和 title 属性中发现的任何含义外，没有传达任何含义。

所以不：使用<div> 不会在 HTML 中定义一个部分。

来自规范：

`<section>`

<section> 元素表示文档或应用程序的通用部分。在这种情况下，部分是内容的主题分组。每个section 都应该被识别，通常包括一个标题（h1-h6 元素）作为<section> 元素的子元素。

章节的示例包括章节、选项卡式对话框中的各种选项卡式页面或论文的编号章节。网站的主页可以分为介绍、新闻和联系信息等部分。

...

<section> 元素不是通用容器元素。当仅出于样式目的或为了方便编写脚本而需要元素时，鼓励作者改用<div> 元素。一般规则是 <section> 元素只有在元素的内容明确列在文档大纲中时才是合适的。

(https://www.w3.org/TR/html/sections.html#the-section-element)

`<div>`

<div> 元素根本没有特殊含义。它代表它的孩子。它可以与class、lang 和title 属性一起使用，以标记一组连续元素共有的语义。

注意：强烈建议作者将<div> 元素视为最后手段，因为没有其他元素适合。使用更合适的元素而不是 <div> 元素可以提高读者的可访问性和作者的可维护性。

(https://www.w3.org/TR/html/grouping-content.html#the-div-element)

【讨论】：

更多地思考section 与div，包括根据这个答案，我得出的结论是它们是完全相同的元素。 W3C 说div“代表它的孩子”。好吧，这不也是section 元素的作用吗？是的，section 意味着它的孩子被组合在一起，但是通过将孩子放在 div 中的行为，你也，是的，将它们组合在一起。至少我这样做的方式，我不了解你们。
@trysis：“多考虑section 与div”——不要想太多。 HTML 并不复杂。 “通过将孩子放入 div 的行为本身，您也可以将他们组合在一起。”根据 HTML 规范，你不是。您将它们包装在 div 中是出于样式目的，或者 JavaScript 方便，或者 W3C 尚未想到的其他东西，但并未向读者表明子元素是一个组。
@Matian2040：因为HTML的目的是为文本添加意义，例如<p>This is a paragraph</p>或<h2>This is a second-level heading</h2>。因为<div> 没有添加任何含义，所以只有在没有其他 HTML 元素为相关文本添加适当含义时才使用它。
所以如果使用部分没有一个优势？大声笑，为什么它甚至存在呢？！
@EdwardBlack：它传达了与其他标签不同的含义。传达意义是 HTML 的重点。

【解决方案2】：

<section> 标记 section，<div> 标记没有关联语义的通用块。

【讨论】：

@MarwenTrabelsi — 链接没有失效。 “Section”是一个标准的英文单词。有字典。
@MarwenTrabelsi — 您称之为“抽象和广泛”的术语是主要区别。

【解决方案3】：

只是一个观察 - 没有找到任何证实这一点的文件

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

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

--Level2 - header 以比 Level1 - header 更小的字体显示。

当使用 css 为 h1 标头着色时，内部 h1 也被着色（行为与常规 h1 相同）。 Firefox 18、IE 10 和 Chrome 28 中的行为相同。

【讨论】：

太奇怪了...创建了一个快速堆栈闪电战来演示它，因为它仍然是一个东西stackblitz.com/edit/angular-h1ayez
和Latex语言中的section完全一样，这里叫做subsection。
MDN 文档提到避免在单个页面中出现多个 h1，即使它在技术上得到支持。我想这是导致 h1 嵌套在部分中的奇怪样式的错误（？）。在@GavinMannion 发布的演示中（谢谢），您会注意到所有 h2 的样式都相同，无论部分内的嵌套级别如何。 TLDR、h1 的处理方式不同，部分只能以 h2 而不是 h1 开头。

【解决方案4】：

`<div> Vs <Section>`

第一轮

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

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

第二轮

<div>: 浏览器支持

<section>: 浏览器支持

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

在这种情况下，div 仅从纯 CSS 或 DOM 的角度来看是相关的，而 section 也与语义相关，并且在不久的将来，与搜索引擎的索引相关。

【讨论】：

浏览器支持在这里不是问题，它与语义有关。如果你使用的是 HTML5，你可能会使用 polyfill。
@JackTuck 如果你不想使用这样的工具怎么办？

【解决方案5】：

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

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

【讨论】：

我不知道为什么有人标记了这个。简短，甜蜜，也是重点。
-1 这没有任何意义，你想如何在层次结构文档（XML/HTML）中对相关元素进行分组，你只能使用任何标签对子元素块进行分组。跨度>
@Svisstack 您是正确的，任何封闭标签（即非自关闭/无效）都可以对子元素块进行分组。虽然我认为这更多地涉及孩子们的关系。它们是否都有相关的上下文要传达？例如：出于功能/样式的原因，将包含多个输入的表单组合在一起。但是这个表格不是网站的一个部分，而是一个有功能的部分。现在假设您的页面正在描述产品。产品的不同部分将列在一个部分元素中，因为这些元素传达了一个集体思想。

【解决方案6】：

注意不要过度使用 section 标签来替代 div 元素。 section 标签应该在 body 的上下文中定义一个重要的区域。从语义上讲，HTML5 鼓励我们将文档定义如下：

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

此策略可让网络机器人和自动屏幕阅读器更好地了解您的内容流。这个标记清楚地定义了您的主要页面内容包含在哪里。当然，页眉和页脚通常在网站内的数百个页面中很常见。 section 标记应仅限于解释包含独特内容的位置。在 section 标签内，我们应该继续使用层次结构中较低的 HTML 标签来标记和控制内容，例如 h1、div 、跨度等

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

【讨论】：

“在大多数简单的页面中，应该只有一个部分标签”。你能举一个不简单的例子，你想在一个页面中使用多个部分标签吗？
我会在其中使用main 标签，并在其中使用一个或多个section 标签。
如果您遵循规范，您的 section 应该是 main，div 应该是 article，span 可能是 section（取决于它在做什么)

【解决方案7】：

<div>——我们都知道和喜爱的通用流容器。它是一个没有附加语义含义的块级元素（W3C:Markup, WhatWG）

<section>——通用文档或应用程序部分。 A 通常有一个标题（标题），也可能有一个页脚。它是一大块相关内容，例如一篇长文章的一个小节，页面的主要部分（例如主页上的新闻部分），或者 web 应用程序选项卡式界面中的一个页面。（W3C：标记，WhatWG）

我的建议： div：使用较低版本（我认为仍然是 4.01）html 元素（很多设计师都处理过）。部分：最近来的 (html5) html 元素。

【讨论】：

【解决方案8】：

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

总体差别不大。

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

【讨论】：

【解决方案9】：

section 标签为 html 提供了更加语义化的语法。 div 是一个部分的通用标签。当您将部分标签用于适当的内容时，它也可以用于搜索引擎优化。 section 标签也使得 html 解析变得容易。有关更多信息，请参阅。 http://blog.whatwg.org/is-not-just-a-semantic

【讨论】：

“section 标签也使得 html 解析变得容易”——嗯？你的意思是生成页面的轮廓吗？

【解决方案10】：

<section></section>

HTML <section> 元素代表一个通用部分文档，即内容的主题分组，通常带有标题。每个<section> 都应该被识别，通常包括标题（<h1>-<h6> 元素）作为<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

这里有一些链接可以详细讨论它们之间的区别：

【讨论】：

【解决方案11】：

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

而：

<div> 标签定义 HTML 文档中的一个分区或一个部分。

<div> 标签用于对块元素进行分组以使用 CSS 对其进行格式化。

【讨论】：

文档的页眉、页脚和其他部分都有自己的语义标签。（<header>、<footer>、<nav>、<article> 等）

【解决方案12】：

这里是关于我如何在 Web 应用程序的情况下区分几个最近的 html5 元素的提示（纯粹是主观的）。

<section> 标记图形用户界面中的小部件，而<div> 是小部件组件的容器，例如包含按钮和标签等的容器。

<article> 将具有相同用途的小部件分组。

<header> 是标题和菜单栏。

<footer> 是状态栏。

【讨论】：

这太错误了，我什至不知道从哪里开始。您正在为具有 0 视觉意义且 100% 语义的元素分配视觉意义。如果您将评论中的
和
替换为
，那么您将是正确的。

&lt;section&gt;

&lt;div&gt;

&lt;div&gt; Vs &lt;Section&gt;

第一轮

第二轮

`<section>`

`<div>`

`<div> Vs <Section>`