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

933

<section>和<div>in有HTML什么区别？
我们不是在两种情况下都定义了节吗？

html

— 简单
source

1

另请参阅：使用section元素进行样式布局和包装

— 2014年

1035

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

<div>，在另一方面，没有传达任何意义来自于它的任何发现一旁class，lang和title属性。

所以不：使用a <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）

— 保罗·D·威特
source

22

考虑到更多关于sectionvs.的问题div，包括根据这个答案，我得出的结论是它们是完全相同的元素。W3C表示div“代表其子代”。好吧，这不是section元素的作用吗？是的，这section意味着将其子项分组在一起，但是通过将子项放入a内div，您也可以将它们分组在一起。至少我是这样，我不知道你们。

— trysis 2014年

8

@trysis：“更多关于sectionvs的思考div” –不要对此考虑太多。HTML并不复杂。“通过将孩子放进一个孩子的行为，是的div，你也是，将他们分组在一起。” 根据HTML规范，您并非如此。您将它们包装起来是div为了样式目的，JavaScript方便性，或者W3C尚未想到的其他事情，但是并没有向读者表明子元素是一个组。

— Paul D. Waite 2014年

7

@ Matian2040：因为HTML的目的是为文本添加含义，例如<p>This is a paragraph</p>或<h2>This is a second-level heading</h2>。因为<div>没有添加任何含义，所以只有在没有其他HTML元素为所讨论的文本添加适当含义的情况下，才使用它。

— Paul D. Waite

7

因此，如果使用段，则没有单一优势？大声笑，那为什么还存在呢？

— 黑色

13

@EdwardBlack：它传达的含义不同于其他标签。传达含义是HTML的重点。

— Paul D. Waite

71

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

— 昆汀
source

@MarwenTrabelsi —链接没有失效。“ Section”是标准的英语单词。提供字典。

— 昆汀

@MarwenTrabelsi —您称为“抽象且广泛”的术语是关键区别。

— 昆汀

64

`<div> Vs <Section>`

第1轮

<div>:的HTML 元素（或HTML文档分割元件）是用于流内容，这本身不表示任何一般容器。它可以用于对元素进行分组以进行样式设置（使用class或id属性），或者因为它们共享属性值（例如lang）。仅当没有其他语义元素（例如<article>或<nav>）合适时才应使用它。

<section>:该HTML段件（<section>）表示一个文件，一个通用的部分，即，内容的主题分组，典型地具有一个标题。

第二回合

<div>: 浏览器支持 在此处输入图片说明

<section>: 浏览器支持

表格中的数字指定了完全支持该元素的第一个浏览器版本。 在此处输入图片说明

因此，div仅从纯CSS或DOM角度是相关的，而部分也与语义有关，并且在不久的将来与搜索引擎的索引也相关。

— 苏博德·古拉克（Subodh Ghulaxe）
source

10

浏览器支持在这里不是问题，它与语义有关。如果您使用的是HTML5，则可能仍会使用polyfill。

— 杰克·塔克

@JackTuck还有，如果您不想使用此类kludges怎么办？

— 李斯特先生，2015年

48

只是一个观察-尚未找到任何证实这一事实的文档

如果一个节包含另一个节，则内部节中的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中，这是相同的行为。

— Runec
source

多么奇怪...创建了一个快速的stackblitz来演示它，因为它仍然是一个东西stackblitz.com/edit/angular-h1ayez

— Gavin Mannion

24

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

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

— srikanth_k
source

我不知道为什么有人将其标记下来。简短，甜美，也是重点。

— user6031759

1

-1没有任何意义，您想要如何在层次结构文档（XML / HTML）中对相关元素进行分组，只能使用任何标签对子元素块进行分组。

— Svisstack '18

@Svisstack您正确的说，任何封闭标签（即非自封闭/无效）都可以对子元素块进行分组。尽管我认为这对孩子之间的关系越来越重要。他们都有相关的背景要传达吗？例如：出于功能/样式原因，包含多个输入的表单将被分组在一起。但是这种形式不是网站的一部分，而是具有功能的一部分。现在，假设您的页面正在描述一种产品。产品的不同部分将在section元素中列出，因为这些元素传达了一个共同的想法。

— Xandor

20

注意不要过度使用section标签代替div元素。一节代码应在上下文中定义一个显著区域的身体。从语义上讲，HTML5鼓励我们按以下方式定义文档：

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

展开摘要

这种策略使网络机器人和自动屏幕阅读器可以更好地理解您的内容流。该标记明确定义了主要页面内容的包含位置。当然，页眉和页脚通常在网站的数百个页面（如果不是数千个页面）中很常见。该部分标签应限于解释这里独特的内容包含。然后在section标签内，我们应继续使用层次结构中较低的HTML标签（例如h1，div，span）标记和控制内容等）。

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

— KoolWebDezign
source

“在大多数简单页面中，应该只有一个小节标记”。您可以举一个简单的例子，在一个例子中想在一个页面中使用多个节标记吗？

— styfle

6

我会main在其中使用标签，并在其中使用一个或多个section标签。

— Chazy Chaz

10

<div>-我们都知道并喜欢的通用流程容器。这是一个块级元素，没有其他语义（W3C：Markup，WhatWG）

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

我的建议：div：使用较低的版本（我认为仍为4.01）html元素（很多设计师对此进行了处理）。部分：最近使用（html5）html元素。

— 英国人
source

9

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

— Pooamlairaj
source

1

“ section标签也使html解析变得容易” –是吗？您是要生成页面轮廓吗？

— Paul D. Waite，

7

使用<section>可能会更整洁，帮助屏幕阅读器和搜索引擎优化，同时<div>是在字节小和更快地型

总体差异很小。

另外，建议不要在<section>中放入<section>，而<div>在<section>

— 德鲁
source

3

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

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

<article> 对具有共同目的的小部件进行分组。

<header> 是标题和菜单栏。

<footer> 是状态栏。

— 凯恩E.
source

1

的<section>标签定义文档中的部分，如章节，页眉，页脚，或该文件的任何其它部分。

而：

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

该<div>标记用于组块元件，以将它们与CSS格式化。

— 吉夫斯
source

2

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

— 奥利弗

1

<section></section>

HTML <section>元素表示文档的一般部分，即内容的主题分组，通常带有标题。<section>通常应通过将标题（<h1>- <h6>元素）作为元素的子元素来标识每个<section> 元素。详情请点击链接。

参考文献：

<div></div>

HTML <div>元素（或HTML Document Division Element）是流内容的通用容器，它本质上不代表任何内容。它可以用于对元素进行分组以进行样式设置（使用class或id属性），或者因为它们共享属性值（例如lang）。仅当没有其他语义元素（例如<article>或<nav>）合适时才应使用它。

参考：-http: //www.w3schools.com/tags/tag_div.asp-https : //developer.mozilla.org/en/docs/Web/HTML/Element/div

以下是一些链接，它们更多地讨论了它们之间的区别：

— 阿萨德·阿里（Asad Ali）
source