是语义化标签，仅用于有独立主题、可命名且能入大纲的内容区块，必须配 h2–h6 标题，不可替代 div 或 article，嵌套不宜超过两层。
用 <section></section> 切分页面，核心不是“怎么包”，而是“值不值得单独命名”。它不是 div 的高级替代品，而是一个语义声明：这块内容有主题、能入大纲、脱离上下文也说得清。
只在内容真有独立主题时才用
判断标准很直接：你能给它起个名字，别人一听就懂它干啥。比如「安装步骤」「用户反馈」「性能对比」「技术参数」——这些是明确的主题单元；但轮播图外层、导航下拉菜单、页脚社交媒体图标栏，没有主题性，只是布局或交互容器，用 <div> 更准确。
<ul>
<li>适合用 <code><section></section>：产品页的「核心功能」「客户案例」「售后支持」三个并列区块
<section></section>：整个页脚包裹层、Grid 布局的父容器、JS 控制的弹窗遮罩<article></article>；不能但能概括出一个标题，才是 <section></section>
必须配 h2–h6 标题，不能省略
没有标题的 <section></section> 在语义上等同于 <div>，只是多写了几个字符。屏幕阅读器无法识别其结构意图，SEO 工具也难提取重点。
<ul>
<li>标题必须写在 <code><section></section> 内部，推荐从 <h2></h2> 开始（<h1></h1> 通常留给页面主标题）
class="visually-hidden" 隐藏，但元素本身不能少<h2></h2>，子 <section></section> 就该用 <h3></h3>，不能全堆 <h2></h2>
别和 div、article 混着用
三者分工清晰，互不替代：
Codex Bridge
下载
一款AI工具，主要用于将编码任务调度到本地 OpenAI Codex CLI，支持后台执行、状态轮询以及可交互式回答的澄清问题。适用于 OpenClaw 需要……，适合需要提升相关任务效率的用户。
<div>：纯无语义容器，只为加样式、绑事件、做布局——诚实用它，不丢人 <li> <code><section></section>：有主题的文档节，强调“内容组织”，依赖上下文存在（如「部署流程」需在教程页里才有意义）-
<article></article>：可独立分发的内容单元（如一篇博文、一条新闻），复制出去也能被理解、被 RSS 抓取 - 错误示例：
<section><article>...</article></section>—— 若里面是“最新文章列表”，外层不该是<section></section>，而应是<main></main>或<div> <h3>嵌套与结构要克制</h3> <p>可以嵌套，但不宜过深。两层 <code><section></section>已足够表达多数逻辑关系，再深容易让大纲失焦、辅助技术难解析。- 合理嵌套：一篇技术文档内，
<article></article>下分「背景」「实现」「测试」三块，每块用<section></section> - 结构失衡：同一级多个
<section></section>却主题混乱（比如把「导航栏」「页脚」「版权声明」全塞进去） - 检查方法：打开 Chrome DevTools → Accessibility 面板，看大纲树是否符合预期；或用 HeadingsMap 插件快速浏览标题层级
- 合理嵌套：一篇技术文档内，
