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

Question

<section> 和 <div> 在 HTML 之间有什么区别？

我们不是在两种情况下都定义了部分吗？

原文由 Simplicity 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

<section> 表示里面的内容是分组的（即与一个主题相关），并且应该作为一个条目出现在页面的大纲中。

<div> , on the other hand, does not convey any meaning , aside from any found in its class , lang and title attributes.

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

部分与辅助技术的地标导航最相关。要出现在文档大纲或地标列表中，它们需要一个名称，可以通过 aria-label , aria-labelledby 或 title :

 <section aria-labelledby="s3-h2">
  <h2 id="s3-h2">Introduction</h2>
  …

例如，Mac 上的 VoiceOver 可以提供一个大纲以直接导航到该部分。

原文由 Paul D. Waite 发布，翻译遵循 CC BY-SA 4.0 许可协议