Pau*_*ite 974
<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)
- 更多地考虑`section`与`div`,包括根据这个答案,我得出结论,他们是完全相同的元素.W3C说`div`"代表它的孩子".好吧,这也不是`section`元素的作用吗？是的,`section`意味着它的孩子被组合在一起,但是通过把孩子放在`div`中的行为,你也是,是的,**将它们组合在一起**.至少我这样做的方式,我不知道你们. (16认同)
- @EdwardBlack:它传达的意义与其他标签不同.传达意义是HTML的全部要点. (10认同)
- @ Matian2040:因为HTML的目的是为文本添加含义,例如`<p>这是段落</ p>`或`<h2>这是第二级标题</ h2>`.因为`<div>`没有添加任何含义,所以如果没有其他HTML元素为相关文本添加适当的含义,则只能使用它. (6认同)
- 那么使用部分没有一个优势吗？大声笑,为什么它甚至存在呢？! (6认同)
- @trysis:"更多关于`section`与`div`的思考" - 不要过多考虑它.HTML并不复杂."通过把孩子放在`div`中的行为,你也是,是的,**将它们组合在一起**."根据HTML规范,你不是.你将它们包装在`div`中以用于样式目的,或JavaScript方便,或W3C尚未想到的其他东西,但不向读者表明子元素是一个组. (5认同)
- +1。imo节，页眉，页脚，导航，div等在技术上都是相同的。但**地**，它们都是不同的。 (3认同)
- @DanBray：“对我来说，使用 `<div>` 并不是最后的手段”——我认为“最后的手段”的意思是，如果有任何 HTML 元素的含义与你的内容相匹配，你应该使用它元素而不是`<div>`。我不认为这在规范中是矛盾的，尽管如果您使用 `<div>` 当您的内容可以由不同的元素更好地描述时，那么您就没有遵循规范。 (2认同)
- <section>表示内容已链接。例如，这3个段落与“注释”或“列出的来源”有关。您正在查看的实际文本。（或出于可访问性考虑，屏幕阅读器正在阅读）。另一方面，<div>对所显示的文本/内容无意义。div内可能有3个段落，但对于屏幕阅读器而言，它们只是3个完全独立的段落，恰好位于<div>下，该段落将文本涂成绿色，这是盲人看不见的。<section>分组内容，<div>分组结构。希望能有所帮助。 (2认同)
- 值得注意的是，还存在**技术**差异：/sf/answers/4103734701/ (2认同)
- 上面的讨论系列给我很大的启发。我对网页设计很陌生。我了解到HTML/CSS/Javascript应该属于一种叫做关注点分离的设计。所以 CSS 专注于样式，javascript 专注于动作和反应，而 html 专注于包含信息。如果你从 Javascript 的角度来看 HTML，你可能会发现很多事情毫无意义，只是因为你使用了错误的视角。HTML也是我们程序员作为人类需要操作的文档。因此给予足够的语义标签有助于增强可读性，应该受到尊重。 (2认同)
Sub*_*axe 61
<div> Vs <Section>
第1轮
<div>:的HTML 元素(或HTML文档分割元件)是用于流内容,这本身不表示任何一般容器.它可用于将元素分组以用于样式目的(使用class或id属性),或者因为它们共享属性值,例如lang.只有在没有其他语义元素(例如<article>或<nav>)合适时才应该使用它.
<section>:该HTML段件(<section>)表示一个文件,即,内容的主题分组的一个通用的部分,通常与一个标题.
第2轮
<div>: 浏览器支持
<section>: 浏览器支持
表中的数字指定了完全支持该元素的第一个浏览器版本.
在这种情况下,div仅与纯CSS或DOM视角相关,而section也与语义相关,并且在不久的将来也与搜索引擎进行索引相关.
- 浏览器支持在这里不是问题,它是关于语义的.如果您使用的是HTML5,那么无论如何您都可以使用polyfill. (9认同)
run*_*nec 42
只是一个观察 - 没有找到任何证实这一点的文件
如果某个部分包含另一个部分,则内部部分中的h1标题将以比外部部分中的h1-标题更小的字体显示.当使用div而不是section时,内部div h1-header被显示为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中的行为相同.
- http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#rank (6认同)
- 多么奇怪......创建了一个快速 stackblitz 来演示这个，因为它仍然是一个东西 https://stackblitz.com/edit/angular-h1ayez (4认同)
- MDN 文档提到要避免在单个页面中出现多个 h1，尽管它在技术上是受支持的。我想这就是导致 h1 嵌套在节中的奇怪样式的错误（？）。在@GavinMannion（谢谢）发布的演示中，您会注意到所有 h2 的样式都相同，无论节内的嵌套级别如何。TLDR，h1 的处理方式不同，并且各节只能以 h2 而不是 h1 开头。 (2认同)
小智 16
请注意不要过度使用section标记作为div元素的替代.一节代码应在上下文中定义一个显著区域的身体.从语义上讲,HTML5鼓励我们按如下方式定义文档:
<html>
<head></head>
<body>
<header></header>
<section>
<h1></h1>
<div>
<span></span>
</div>
<div></div>
</section>
<footer></footer>
</body>
</html>此策略允许Web机器人和自动屏幕阅读器更好地了解您的内容流.此标记明确定义了主要页面内容的包含位置.当然,页眉和页脚通常在网站中的数百个页面(而不是数千个页面)中是通用的.该部分标签应限于解释这里独特的内容包含.在section标签中,我们应该继续使用层次结构中较低的HTML标记来标记和控制内容,例如h1,div,span等.
在大多数简单页面中,应该只有一个节标记,而不是多个标记.另请注意,还有其他有趣的HTML5标签与section类似.考虑在文档流程中使用文章,摘要,旁边和其他内容.如您所见,这些标记进一步增强了我们定义HTML文档主要区域的能力.
- 我会在那里使用`main`标签,在里面使用一个或多个`section`标签. (6认同)
- 如果您遵循规范，您的“section”应该是“main”，“div”应该是“article”，“span”可能是“section”（取决于它在做什么） (3认同)
ang*_*asS 10
<div> - 我们都知道和喜爱的通用流量容器.它是一个块级元素,没有额外的语义含义(W3C:Markup,WhatWG)
<section> - 通用文件或申请部分.A通常有标题(标题),也可能是页脚.它是一大块相关内容,如长文章的子部分,页面的主要部分(例如主页上的新闻部分),或webapp标签界面中的页面.(W3C:Markup,WhatWG)
我的建议:div:使用较低版本(我认为仍然是4.01)html元素(很多设计师处理过).部分:最近提交(html5)html元素.
section标记为html提供了更多的语义语法.div是节的通用标签.当您使用部分标记获取适当的内容时,它也可用于搜索引擎优化.section标签还可以轻松进行html解析.有关更多信息,请参阅.http://blog.whatwg.org/is-not-just-a-semantic
使用<section>可能会更整洁,帮助屏幕阅读器和搜索引擎优化,同时<div>是在字节小和更快的输入
整体差别很小.
此外,不建议把<section>在<section>,而不是放置<div>内<section>