之间有什么区别 <section> 和 <div> ?

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

答案

<section>表示内部的内容已分组(即,与单个主题相关),并且应作为条目显示在页面轮廓中。

另一方面, <div>除了在classlangtitle属性中发现的任何含义外不传达任何含义

所以不能:使用<div>不会在 HTML 中定义部分。

从规格:

<section>

<section>元素代表文档或应用程序的通用部分。在这种情况下,一节是内容的主题分组。通常应通过将标题(h1-h6 元素)作为<section>元素的子元素来标识每个section

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

...

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

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

<div>

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

注意:强烈建议作者将<div>元素视为最后选择的元素,因为在没有其他元素适合的情况下。使用更合适的元素而不是<div>元素可以使读者更好地访问,并为作者提供更容易的可维护性。

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

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

<div> Vs <Section>

第 1 轮

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

<section>: HTML Section 元素( <section> )表示文档的一般部分,即内容的主题分组,通常带有标题。


第二回合

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

<section>: 浏览器支持

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

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

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

在 HTML5 标准中, <section>元素定义为一组相关元素。

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

注意不要过度使用section标签代替div元素。 区段标签应在主体的上下文中定义一个重要区域。从语义上讲,HTML5 鼓励我们按以下方式定义文档:

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

这种策略使网络机器人和自动屏幕阅读器可以更好地理解您的内容流。该标记明确定义了主要页面内容的包含位置。当然,页眉和页脚通常在网站的数百甚至数千页面中很常见。 section标签应仅限于解释唯一内容的位置。然后,在section标签内,我们应继续使用层次结构中较低的 HTML 标签(例如h1divspan等)来标记和控制内容。

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

<div> —我们都知道并喜欢的通用流程容器。这是一个块级元素,没有其他语义(W3C:Markup,WhatWG)

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

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

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

使用<section>可能更整洁 ,可以帮助屏幕阅读器SEO,<div> 字节数较小键入速度更快

总体上差别不大。

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

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

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

<article>将具有共同目的的小部件分组。

<header>是标题和菜单栏。

<footer>是状态栏。