<section> 是语义化标签，仅用于有独立主题、可命名且能入大纲的内容区块，必须配 h2–h6 标题，不可替代 div 或 article，嵌套不宜超过两层。

用 <section> 切分页面，核心不是“怎么包”，而是“值不值得单独命名”。它不是 div 的高级替代品，而是一个语义声明：这块内容有主题、能入大纲、脱离上下文也说得清。

只在内容真有独立主题时才用

判断标准很直接：你能给它起个名字，别人一听就懂它干啥。比如「安装步骤」「用户反馈」「性能对比」「技术参数」——这些是明确的主题单元；但轮播图外层、导航下拉菜单、页脚社交媒体图标栏，没有主题性，只是布局或交互容器，用 <div> 更准确。

• 适合用 <section>：产品页的「核心功能」「客户案例」「售后支持」三个并列区块
• 不适合用 <section>：整个页脚包裹层、Grid 布局的父容器、JS 控制的弹窗遮罩
• 不确定？复制那段 HTML 到新文件里打开——脱离原页面还能看懂吗？能，考虑 <article>；不能但能概括出一个标题，才是 <section>

必须配 h2–h6 标题，不能省略

没有标题的 <section> 在语义上等同于 <div>，只是多写了几个字符。屏幕阅读器无法识别其结构意图，SEO 工具也难提取重点。

• 标题必须写在 <section> 内部，推荐从 <h2> 开始（<h1> 通常留给页面主标题）
• 视觉上不想显示？可用 class="visually-hidden" 隐藏，但元素本身不能少
• 嵌套时层级要递进：外层用 <h2>，子 <section> 就该用 <h3>，不能全堆 <h2>

别和 div、article 混着用

三者分工清晰，互不替代：

• <div>：纯无语义容器，只为加样式、绑事件、做布局——诚实用它，不丢人
• <section>：有主题的文档节，强调“内容组织”，依赖上下文存在（如「部署流程」需在教程页里才有意义）
• <article>：可独立分发的内容单元（如一篇博文、一条新闻），复制出去也能被理解、被 RSS 抓取
• 错误示例：<section><article>... —— 若里面是“最新文章列表”，外层不该是 <section>，而应是 <main> 或 <div>

嵌套与结构要克制

可以嵌套，但不宜过深。两层 <section> 已足够表达多数逻辑关系，再深容易让大纲失焦、辅助技术难解析。

• 合理嵌套：一篇技术文档内，<article> 下分「背景」「实现」「测试」三块，每块用 <section>
• 结构失衡：同一级多个 <section> 却主题混乱（比如把「导航栏」「页脚」「版权声明」全塞进去）
• 检查方法：打开 Chrome DevTools → Accessibility 面板，看大纲树是否符合预期；或用 HeadingsMap 插件快速浏览标题层级