section仅在内容有独立主题、能入文档大纲时才该用；必须配h2–h6标题（极少数嵌套例外），无标题则语义失效；与article区别在于是否“可独立分发”。

section 标签不是“语义化装饰”，它只在内容真有独立主题、能被单独命名或跳转时才该用；滥用反而破坏可访问性和 SEO。

什么时候必须用 section 而不是 div

判断依据只有一个：这块内容能否出现在文档大纲里，且脱离上下文仍有明确主题。比如博客正文里「技术原理」「性能测试」「部署步骤」三个部分，各自配

，就适合用 section；但页脚的社交媒体图标栏、导航菜单的下拉容器、轮播图的外层包裹盒，都不满足这个条件，用 div 更准确。

• 用 section 的典型场景：

  用户活跃趋势

  ...
  （仪表盘中可被单独引用的数据模块）
• 用 div 的典型场景：
  ...
  （仅用于 JS 控制或 CSS 布局）
• 如果只是为了加 margin/padding 或写 querySelector('.card')，别硬套 section —— 语义错位会让屏幕阅读器误判结构层级

section 必须配

～

吗

是的，**绝大多数情况下必须配**。W3C 明确指出：没有标题的 section 无法向辅助技术传达其主题，等同于语义失效。视觉上隐藏标题可用 aria-label 或 visually-hidden 类，但不能省略语义标题元素。

• 允许不显式写标题的极少数例外：嵌套在已有标题的 article 内，且子 section 主题完全由父级标题覆盖（如

  React 状态管理

  useState 用法

  

  财经HTML高端海报生成

  复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

  下载
  ）
• 嵌套 section 时，子级必须用更小级数的标题（如父
  ，子用
  ），否则大纲会混乱
• 别用
  在 section 里 —— 页面级
  应唯一，section 内部从
  起始

section 和 article 的边界在哪

关键看内容是否「可独立分发」：article 是完整单元（如一篇新闻、一条评论、一个用户卡片），能脱离当前页面被 RSS 抓取或单独分享；section 是主题性分组，依赖上下文存在（如文章里的「背景」「方法」「结果」三节，拆开就失去逻辑闭环）。

• 一本书是 article，它的每一章是 section
• 首页上的「最新产品」列表是 section；每条产品卡片本身是 article
• 不要把整个
  包进一个 section —— 这等于告诉浏览器“全页是一个章节”，反而削弱了内部结构

常见错误与调试线索

浏览器开发者工具的「Accessibility」面板会直接标出无标题的 section；Lighthouse 审计也会报 “section element does not have a title” 类警告。真实项目中最容易被忽略的是嵌套层级和标题连续性。

• 错误现象：section 里只有按钮+一行文字，或整个侧边栏被包成一个 section —— 这类内容既无独立主题，也不出现在大纲中
• 错误现象：多个 section 并列却用了相同级数的标题（如全用
  ），导致大纲扁平、跳转锚点失效
• 调试建议：用 document.querySelectorAll('section') 检查每个是否都有 querySelector('h2, h3, h4, h5, h6')，再人工确认标题是否真能概括该区块

真正难的不是写对标签，而是每次写 section 前，停下来问一句：这块内容，有没有名字？别人能不能只看标题就明白它要讲什么？如果答案模糊，就先别动它。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！