<section>必须配真实标题（h2–h6），否则语义失效：屏幕阅读器跳过、SEO无法识别、大纲工具忽略；无标题<section>应改用<div>或CSS容器；它不适用于按钮、轮播图等交互单元，而应专注可命名、可跳转的主题节。
没标题的 <section> 基本等于 <div>
浏览器会照常渲染，但语义完全失效：屏幕阅读器跳过它、SEO 工具无法提取主题、HTML5 Outliner 直接忽略该节点。你写 <section><p>点击下载</p></section>，和写 <div><p>点击下载</p></div> 在辅助技术眼里没有区别——只是多打了 7 个字符。
- 标题必须是真实的
<h2>–<h6>，不能用<p class="title">或 CSS 伪元素模拟 - 标题可以视觉隐藏，比如
<h3 class="visually-hidden">用户反馈</h3>，但必须存在且为 heading 元素 - 多个连续无标题的
<section>是典型信号：你其实想用的是<div>或 CSS Grid 容器
<section> 不是用来包按钮、轮播图或导航栏的
这些是交互/布局单元，不是「可命名、可跳转、可独立理解」的主题节。把轮播图外层套 <section>，相当于给一张海报贴上“第 3 章”的标签——它不构成章节。
- 导航栏应使用
<nav>，页脚用<footer>，侧边栏用<aside> - 纯样式需求（如加背景色、触发动画）优先用
<div class="hero-banner"> - 组件库中常见错误：
<section class="card-grid">里面只有<div class="card">—— 这里没有主题，只有结构
嵌套时标题层级必须递进，不能全用 <h2>
父 <section> 用 <h2>，子 <section> 就得用 <h3>；如果子节还要再分，就用 <h4>。全用 <h2> 会让大纲工具显示为平铺列表，失去层级含义。
- 正确：
<section><h2>部署流程</h2><section><h3>本地调试</h3></section><section><h3>生产发布</h3></section></section> - 错误：
<section><h2>部署流程</h2><section><h2>本地调试</h2></section></section>（第二层<h2>被解析为同级新节） - 标题不必都视觉可见，但层级关系必须真实反映内容逻辑深度
和 <article>、<main> 混用时，角色不能互换
<section> 是组织者，不是内容主体。它不能替代 <article> 去包裹一篇博客，也不能替代 <main> 当整页内容容器。
-
<main>只能出现一次，且不能是<section>的子元素 - 一篇博文适合用
<article>包裹，内部再用<section>分「背景」「实现」「测试」小节 - 把整个
<main>套进一个<section>，反而模糊了主次——<main>本身已是最高层级语义容器
<section id="block-12"> 到底是干啥的？” 
