section 标签的用途
<section> 把同一主题的内容归为一组，并以一个说明该主题的标题开头。一个分成“功能”“价格”和“常见问题”几部分的落地页就是典型例子：
每个 section 都是页面的一章，每个标题都是页面目录中的一行。和其他语义标签一样，<section> 没有默认样式，边框来自 CSS。
section、article 与 div 的区别
这三者在屏幕上看起来一样，区别在于它们对内容的说明：
| 元素 | 含义 | 判断方法 |
|---|---|---|
<article> | 一个完整、独立的内容 | 单独发布到另一个网站或信息流中，它还说得通吗？ |
<section> | 更大整体中一个有主题的部分 | 它有（或需要）标题吗？它是某个整体中的一章吗？ |
<div> | 没有含义：用于样式或布局的盒子 | 它只是为了 CSS 或 JavaScript 而存在吗？ |
博客文章、论坛评论、新闻报道和商品卡片都是 article。“功能”“第 2 章”和“相关商品”是 section。把三张卡片排成一行的 flex 行是 div。
section 中的 article
这两者可以互相嵌套。下面是一个“最新文章”section，里面放着几篇各自独立的 article：
注意 <div class="grid">：它只是为了把卡片排成一行而存在，所以用 div 是对的。每张卡片都是 article，因为每篇文章都能独立成立。
article 中的 section
一篇长文章可以像书中的章节一样分成多个 section。标题级别从文章自己的标题往下延续：
蓝色的框是 article（整篇指南），绿色的条是它的各个 section。给 section 使用下一级标题：h2 的 article 里放 h3 的 section。
有名称的 section 会成为地标
屏幕阅读器会把某些元素列为地标，用户可以在地标之间跳转。只有当 <section> 有可访问名称时，它才会成为 region 地标。把 aria-labelledby 指向它的标题：
<section aria-labelledby="pricing-title">
<h2 id="pricing-title">Pricing</h2>
...
</section>
只给用户想直接跳转到的少数几个 section 这样做，不要每个都加：有二十个地标的页面，和一个都没有的页面一样难浏览。没有名称的 section 依然有用，因为它们的标题会出现在屏幕阅读器的标题列表中。
section 也很适合作为页内链接的目标。给它一个 id，带有 href="#id" 的链接就能跳转过去：
常见错误
- 把
<section>当作样式包裹元素。如果没有标题、没有主题，就用<div>。语义化 HTML 页面说明了每个布局标签的适用场景。 - 用
<section>包裹单篇博客文章。能独立成立的文章是<article>。 - 没有标题的 section。加一个标题，哪怕是视觉上隐藏的，或者重新考虑它到底是不是 section。
- 用
<section>代替<main>。页面的主要内容放在<main>中，section 放在它里面。 - 给每个 section 都命名。只给重要的 section 加
aria-labelledby，让地标列表保持简短。
常见问题
HTML 中的 section 标签是什么？
<section> 把属于同一主题的内容归为一组，比如文档的一章，或者落地页中的“价格”部分。它通常应该以一个标题开头，说明这一部分讲的是什么。
section 和 div 有什么区别？
<section> 表示这些内容是文档中一个有主题、有自己标题的部分。<div> 不表达任何含义，它只是一个用于样式或布局的盒子。如果你只需要一个给 CSS 用的包裹元素，就用 <div>。
section 和 article 有什么区别？
<article> 是脱离页面也能独立成立的内容：一篇博客文章、一条评论、一张商品卡片。<section> 是某个更大整体的一部分，只有放在上下文中才有意义。问问自己这块内容能不能单独发布：能，就是 article。
article 里可以放 section，section 里可以放 article 吗？
两者都可以。一篇长文章可以分成多个 section，而像“最新文章”这样的 section 也可以包含一组 article。
section 必须有标题吗？
几乎所有情况下都应该有，因为标题就是这个主题的名字。如果你想不出它的标题，这块内容很可能不是 section，用 <div> 更合适。
