首页 文章

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

提问于
浏览 次
729

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

html5 html

12 回答

  • 57

    请注意不要过度使用 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>

    此策略允许Web机器人和自动屏幕阅读器更好地了解您的内容流 . 此标记明确定义了主要页面内容的包含位置 . 当然，页眉和页脚通常在网站内的数百个页面中是常见的 . 应限制 section 标记以解释包含唯一内容的位置 . 在 section 标记内，我们应该继续使用层次结构较低的HTML标记标记和控制内容，如 h1 ， div ， span 等 .

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

    回复于
  • 72

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

    <section> 在图形用户界面中标记小部件，而 <div> 是小部件组件的容器，如容器按住按钮，标签等 .

    <article> 分享共享目的的小部件 .

    <header> 是 Headers 和菜单栏 .

    <footer> 是状态栏 .

    回复于
  • 881

    使用 <section> 可能是 neater ，帮助 screen readers 和 SEO 而 <div> 是 smaller in bytes 和 quicker to type

    整体差别很小 .

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

    回复于
  • 9

    <div> Vs <Section>

    第1轮

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

    <section>: HTML Section元素（ <section> ）表示文档的通用部分，即内容的主题分组，通常带有 Headers .

    第2轮

    <div>: Browser Support
    enter image description here

    <section>: Browser Support

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

    在这种情况下，div仅与纯CSS或DOM视角相关，而一个部分也与语义相关，并且在不久的将来也可用于搜索引擎的索引 .

    回复于
  • 18

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

    然而：

    <div> 标记定义HTML文档中的分区或节 .

    <div> 标记用于对块元素进行分组以使用CSS格式化它们 .

    回复于
  • 33

    <section></section>

    HTML <section>元素表示文档的通用部分，即内容的主题分组，通常带有 Headers . 应识别每个<section>，通常包括 Headers （<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

    以下是一些链接，讨论了它们之间的差异：

    回复于
  • 1

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

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

    <section>
  <h1>Level1</h1>
  some text
  <section>
    <h1>Level2</h1>
    some more text
  </section>
</section>
    • Level2 - Headers 以比Level1 - Headers 更小的字体显示 .

    当使用css为h1 Headers 着色时，内部h1也被着色（表现为常规h1） . 这与Firefox 18，IE 10和Chrome 28中的行为相同 .

    回复于
  • 9

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

    <div> 元素已定义作为一个儿童元素块 .

    回复于
  • 1

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

    回复于
  • 1

    <div> - 我们都知道和喜爱的通用流量容器 . 它是一个块级元素，没有额外的语义含义（W3C：Markup，WhatWG）

    <section> - 通用文件或申请部分 . A通常有 Headers （ Headers ），也可能是页脚 . 它是一大块相关内容，如长文章的子部分，页面的主要部分（例如主页上的新闻部分），或webapp选项卡界面中的页面 . （W3C：Markup，WhatWG）

    我的建议：div：使用较低版本（我认为仍然是4.01）html元素（很多设计师处理过） . section：最近提交（html5）html元素 .

    回复于
  • 9

    <section> 表示内部内容被分组（即与单个主题相关），并且应该显示为页面轮廓中的条目 .

    另一方面， <div> 除了 class ， lang 和 title 属性中的任何内容外，没有任何意义 .

    所以没有：使用 <div> 没有在HTML中定义一个部分 .

    从规格：

    <section>

    <section>元素表示文档或应用程序的通用部分 . 在这种情况下，一节是内容的主题分组 . 应识别每个部分，通常通过包含 Headers （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）

    回复于
  • 4

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

    回复于

相关问题