不是视觉分块工具，仅适用于能命名、进大纲、被锚点跳转且必须配–标题的内容区块；无标题的语义等同，会触发lighthouse警告并损害seo与无障碍访问。

<section></section> 不是“视觉分块工具”，它只在内容能起名字、进大纲、被锚点跳转时才该用；没标题的 <section></section> 语义上等于 <div>，纯属多打字。 <h3>什么时候必须配 <code><h2></h2>–<h6></h6>

没有标题的 <section></section> 在辅助技术中不被视为独立节点，Lighthouse 会报 Document does not have a <title> element</title> 类似语义缺失警告，搜索引擎也难提取主题意图。

• 标题必须存在，但不必视觉可见：<h3 class="visually-hidden">用户活跃趋势</h3> 合法且常用
• 嵌套时标题层级要递进：父 <section></section> 用 <h2></h2>，子 <section></section> 就得用 <h3></h3>，不能全写 <h2></h2>
• 同级多个 <section></section> 应逻辑并列，比如「技术原理」「代码示例」「部署流程」；若写成「安装步骤」里再套一个无标题的「命令列表」，就破坏了语义层级

和 <div>、<code><article></article> 怎么选

三者语义边界清晰，互不替代：

• 只为加 margin、触发 CSS 动画、或给 JS 找个操作容器 → 用 <div class="js-modal-trigger">，别硬套 <code><section></section>
• 内容能独立成文、可被 RSS 抓取或单独分享（如一篇博客、一条新闻）→ 用 <article></article>，不是 <section></section>
• 导航栏、页脚里的社交媒体图标、轮播图控制按钮 → 这些是交互/布局单元，用 <div> 更诚实 <li>已有更具体语义标签时别退化：<code><nav></nav> 就别包 <section></section>，<footer></footer> 也不该是 <section></section> 的子元素

常见错误写法与替代方案

这些看似省事的操作，实际让结构失焦、可访问性归零：


小橡皮
小橡皮是一款内容运营工具，AI内容一键变人味，发布前风险检测。
下载
• <section><button>提交</button><p>请确认信息</p></section> → 没标题、无主题，纯交互容器，改用 <div class="form-actions"> <li> <code><section><nav></nav></section> → <nav></nav> 本身已有明确语义，再包一层反而干扰解析
• 整个 <main></main> 只包一个 <section></section> → 削弱分区意义，不如按真实章节拆成多个 <section></section>
• 为兼容 IE8 强行用 <section></section> → 老 IE 不识别该标签，JS 查不到、CSS 不继承，真要支持就得配 HTML5 Shiv + 样式重置

真正难的不是怎么写 <section></section>，而是写之前先问一句：这段内容，我能脱口说出它的名字吗？如果连自己都说不出“这是XXX模块”，那就别用。