section标签必须配h2～h6标题才能生效，无标题时屏幕阅读器忽略、Lighthouse报错、SEO失效；标题须语义明确且不可用p或div冒充，可视觉隐藏但DOM中必须存在。
section 标签不是“视觉分隔开关”，它只在内容有独立主题、能被单独命名和引用时才该用。没标题的 section 会被屏幕阅读器忽略，Lighthouse 直接报错。
为什么加了 section 却没效果？
常见错误是把 section 当成 div 用：只为了加 margin 或背景色，里面没标题，也没明确主题。浏览器渲染正常，但语义完全失效。
- 屏幕阅读器跳过无标题的
section，用户无法感知结构 - Chrome DevTools 的 Accessibility 面板里不显示该节点
- Lighthouse 检测到 “
Section element has no heading” 并标为可访问性问题 - SEO 工具无法提取大纲，影响内容层级识别
section 必须配 h2～h6，但标题可以隐藏
标题不是装饰，是语义锚点。必须用 h2 到 h6，不能用 p 或带样式的 div 冒充。
- 全页
h1只能出现一次，section内部从h2起始 - 视觉上不想显示标题？可用
class="visually-hidden"配合 CSS 隐藏，但 DOM 中必须存在 - 嵌套
section时，子级标题需降级：父section用h2，子用h3，不能全是h2 - 标题文本要能概括该区块——比如 “性能瓶颈分析” 比 “第二部分” 更有效
什么内容适合包进 section？什么不该用？
判断标准就一条：抽出来，能不能独立命名、放进文档大纲、被人直接引用？能，才轮到 section 出场。
立即学习“前端免费学习笔记（深入）”；
- 适合：
section包裹“兼容性说明”、“API 使用示例”、“压测结果对比”这类主题明确、自成一体的长文段落 - 不适合：纯样式容器（如卡片网格、按钮组）、页脚版权栏、导航菜单 —— 这些该用
div、footer或nav - 更严格场景下，整篇技术文档本身应包裹在
article里，再用多个section划分子章节 - 如果只是想让段落之间空一行，直接用
p+ CSSmargin，别硬套section
嵌套与并列的结构陷阱
同级 section 是逻辑并列关系，不是排排坐；嵌套是主题粒度细化，不是“越深越好”。
- 并列时，每个
section应有对等的主题权重，比如<h2>设计目标</h2>、<h2>实现方案</h2>、<h2>上线反馈</h2> - 嵌套时，子
section必须服务于父主题，比如“API 设计”这个section下再分“请求格式”h3、“响应字段”h3 - 避免一个
section里塞进“用户评价”+“版权声明”+“联系方式”——主题混杂，语义崩塌 - 移动端折叠/展开逻辑若基于
section，务必确保其标题可聚焦、可键盘操作
最常被忽略的一点：用 section 不是为了“看起来分段了”，而是为了让机器（搜索引擎、辅助工具、爬虫）准确理解“这一块到底讲什么”。标题缺失、主题模糊、层级错乱，比不用 section 更糟。
