logo标签列表

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

html
1159
在HTML中，<section>和<div>有什么区别？难道我们不是在两种情况下都定义部分吗？
2
参见：使用section元素进行样式布局和包装 - unor
13个回答
1210

<section>用于将内容分组（即与单个主题相关），并且应出现在页面大纲中。

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

因此，不：在HTML中使用<div>并不能定义一个节。

从规范中得到以下描述：

<section>

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

章节，选项卡对话框中的各个选项卡页面或论文的编号部分都是节的示例。网站的主页可以分成介绍、新闻项目和联系信息等部分。

...

<section>元素不是通用容器元素。当仅需要元素进行样式设置或作为脚本方便时，作者被鼓励使用<div>元素。通用规则是，只有当元素的内容将明确列在文档的大纲中时，<section>元素才是合适的。

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

<div>

<div>元素没有任何特殊含义。它表示其子元素。它可以与class、lang和title属性一起使用，以标记连续元素组中通用的语义。

注意：强烈建议作者将<div>元素视为最后一种选择的元素，即在没有其他更合适的元素时再使用。<div>元素的替代使用比<div>元素具有更好的可读性和易于维护性。

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

在辅助技术的地标导航中，节与文档大纲或地标列表最相关。为了出现在文档大纲或地标列表中，它们需要一个名称，可以通过aria-label、aria-labelledby或title进行指定：

<section aria-labelledby="s3-h2">
  <h2 id="s3-h2">Introduction</h2>
  …
例如，在Mac上，VoiceOver可以提供一个概述，以便直接导航到该部分。
41
思考section与div的区别，包括参考了这个答案之后，我得出的结论是它们其实是完全相同的元素。W3C表示，div元素"代表了它的子元素"。那么，section元素不也是这样吗？是的，section暗示着它的子元素被分组在一起，但是只要将子元素放在div里，你也是在将它们分组在一起。至少我是这么做的，不知道你们怎么看。 - trysis
20
@trysis：“思考section和div的区别”——不要想太多。HTML并不复杂。“通过将子元素放在div中，你也确实是在将它们分组。” 根据HTML规范，你并没有这样做。你是为了样式方便、JavaScript方便或其他W3C尚未考虑到的原因而将它们包裹在div中，但这并不表示对读者来说子元素是一组。 - Paul D. Waite
18
由于HTML的目的是为文本添加含义，例如<p>这是一个段落</p>或<h2>这是一个二级标题</h2>。因为<div>没有添加任何含义，所以只有在没有其他HTML元素可以为相关文本添加适当的含义时，才会使用它。 - Paul D. Waite
9
如果使用章节没有任何优势的话，那么为什么它还存在呢？哈哈。 - Black
25
它传达的意义与其他标签不同。传达意义是HTML的全部意义。 - Paul D. Waite
显示剩余14条评论
88

<section>标记一个部分，<div>标记一个没有相关语义的通用块。

1
@MarwenTrabelsi — 链接未失效。“Section”是一个标准的英语单词。可以使用字典查阅。 - Quentin
@MarwenTrabelsi — 你所称之为“抽象和广泛”的术语 确实是 关键的区别。 - Quentin
这似乎是一种更加“直截了当”的回答。我是以好的方式来说的。就像没有废话，直接点到为止。谢谢。 - Max
76

仅仅是观察 - 没有找到任何证明这一点的文件

如果一个部分包含另一个部分，则内部部分中的h1标题以比外部部分中的h1标题更小的字体显示。 当使用div代替section时，内部div h1标题会显示为h1。

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

-- Level2标题的字体比Level1标题小。

使用CSS为h1标题着色时，内部的h1标题也会被着色（表现为普通的h1标题）。在Firefox 18、IE 10和Chrome 28中都有相同的行为。

4
非常奇怪...我创建了一个快速的stackblitz演示，因为这仍然是一个问题。https://stackblitz.com/edit/angular-h1ayez - Gavin Mannion
就像Latex语言中的章节一样，那里被称为子章节。 - SdSaati
2
MDN文档提到要避免在单个页面中使用多个h1，即使技术上支持。我想这就是导致嵌套在section中的h1具有奇怪样式的错误(?)。在@GavinMannion发布的演示中(感谢)，您会注意到所有的h2都被相同地设置样式，无论在section内嵌套的级别如何。简而言之，h1的处理方式不同，section应该只从h2开始，而不是h1。 - Alan
@GavinMannion：不错的例子。有趣的是，它对<h2>元素没有任何影响...即所有<h2>都以相同的字体大小呈现。哇！太棒了！ - Nawaz
69

<div> Vs <Section>

<div>: HTML的

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

<section>: HTML的

元素表示文档的一个通用部分，即具有标题的内容主题组。

第二轮

<div>: 浏览器支持 enter image description here

<section>: 浏览器支持

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

在这方面，从纯CSS或DOM角度来看，div仅与相关，而section对于语义和近期的搜索引擎索引也是相关的。

11
浏览器支持不是问题，这与语义有关。如果你正在使用HTML5，你可能会使用一个polyfill。 - Jack
@JackTuck 那如果你不想使用这样的临时方法呢？ - Mr Lister
42
在HTML5标准中，<section>元素被定义为一组相关元素的块。 <div>元素被定义为子元素的块。
1
我不知道为什么有人将这个标记为下降。简短、简洁、直接。 - user6031759
1
-1 这没有任何意义，你如何想在分层结构文档（XML/HTML）中分组相关元素，你只能使用任何标签来分组子元素块。 - Svisstack
@Svisstack 您是正确的，任何包含标签（即非自闭合/空）都可以将子元素块分组。虽然我认为这更多地涉及子元素之间的关系。它们是否都有相关的上下文要传达？例如：包含几个输入的表单将因功能/样式原因而被分组在一起。但是，这个表单不是网站的一个部分，而是具有功能的一个部分。现在假设您的页面描述了一个产品。关于产品的不同部分将在一个部分元素中列出，因为这些元素传达了一个集体的想法。 - Xandor
26

使用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标签来控制内容，这些标签在层次结构中较低，例如

、
、等。

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

在大多数简单的网页中，应该只有一个 section 标签。你能举个非简单的例子，在一个页面中想要使用多个 section 标签吗？ - styfle
10
我会在那里使用main标签，其中包含一个或多个section标签。 - Chazy Chaz
3
如果你遵循规范，你的 section 应该是 main，div 应该是 article，而 span 可能会是 section（取决于它的作用）。 - Tom B
14
是我们都熟知和喜爱的通用流容器。它是一个块级元素，没有额外的语义意义（W3C:Markup，WhatWG）。
是一个通用的文档或应用程序部分。一个
通常有一个标题和可能还有一个页脚。它是相关内容的一部分，就像长文章的子部分、主要页面的一部分（例如主页上的新闻部分）或 Web 应用程序选项卡界面中的一个页面一样。（W3C:Markup，WhatWG）
我的建议：
被广泛使用，尤其是在更低版本的 HTML 中（我认为是 4.01 版本及以下）。
是一个较新的 HTML5 元素。
12
使用 <section> 可以使得代码更加整洁，有助于屏幕阅读器和搜索引擎优化(SEO)，而 <div> 则更小巧且打字速度更快。总的来说两者几乎没有区别。此外，不建议在 <section> 中使用 <section>，而应该将 <div> 放置在 <section> 内部。
9
标签为html提供了更语义化的语法。div是一个通用的部分标签。 当您对适当的内容使用
标签时，它也可用于搜索引擎优化。此外，
标签还使得html解析变得容易。欲了解更多信息，请参考http://blog.whatwg.org/is-not-just-a-semantic
。
1
“section标签也使得HTML解析更加容易” — 嗯？你是指用于生成页面大纲吗？ - Paul D. Waite
3
许多网站包含类似以下的HTML代码：<div id="nav"> <div class="header"> <div id="footer">，用于指示导航、页眉和页脚。因此，在html4中使用<div>来定义网页的不同部分，但<div>并没有特定的含义，因此html5引入了许多语义元素之一是<section>，它提供足够的信息给屏幕阅读器、搜索引擎和浏览器等，以识别网站的不同部分。
主要区别在于如果您仅使用<div>来定义网站部分，则难以阅读。
如果您使用语义元素而不是div标记，则可以帮助提高您的网站的可读性，不仅对人类有帮助，对其他程序（屏幕阅读器、搜索引擎等）也有帮助。我们仍然可以在语义元素内使用<div>作为容器。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接