html - 和 有什么区别？

Question

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

Answer 1

<section>表示里面的内容是分组的(即与单个主题相关)，并且应该作为条目出现在页面的轮廓中。

<div> ，另一方面，不传达任何含义，除了在其 class 中找到的任何含义。 , lang和 title属性。

所以不:使用 <div>没有在 HTML 中定义一个部分。

来自规范:

<section>

The <section> element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. Each section should be identified, typically by including a heading (h1-h6 element) as a child of the <section> element.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.

...

The <section> element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the <div> element instead. A general rule is that the <section> element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

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

<div>

The <div> element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements.

Note: Authors are strongly encouraged to view the <div> element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the <div> element leads to better accessibility for readers and easier maintainability for authors.

( 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 可以提供一个大纲来直接导航到该部分。