section仅在内容有独立主题、能入文档大纲时才该用；必须配h2–h6标题（极少数嵌套例外），无标题则语义失效；与article区别在于是否“可独立分发”。
section 标签不是“语义化装饰”，它只在内容真有独立主题、能被单独命名或跳转时才该用；滥用反而破坏可访问性和 SEO。
什么时候必须用 section 而不是 div
判断依据只有一个：这块内容能否出现在文档大纲里，且脱离上下文仍有明确主题。比如博客正文里「技术原理」「性能测试」「部署步骤」三个部分，各自配 <h2></h2>，就适合用 section；但页脚的社交媒体图标栏、导航菜单的下拉容器、轮播图的外层包裹盒，都不满足这个条件，用 div 更准确。
- 用
section的典型场景：<section><h2>用户活跃趋势</h2>...</section>（仪表盘中可被单独引用的数据模块） - 用
div的典型场景：<div class="carousel-wrapper">...</div>（仅用于 JS 控制或 CSS 布局） - 如果只是为了加 margin/padding 或写
querySelector('.card')，别硬套section—— 语义错位会让屏幕阅读器误判结构层级
section 必须配 <h2></h2>～<h6></h6> 吗
是的，**绝大多数情况下必须配**。W3C 明确指出：没有标题的 section 无法向辅助技术传达其主题，等同于语义失效。视觉上隐藏标题可用 aria-label 或 visually-hidden 类，但不能省略语义标题元素。
- 允许不显式写标题的极少数例外：嵌套在已有标题的
article内，且子section主题完全由父级标题覆盖（如<article><h1>React 状态管理</h1> <section><p>useState 用法</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a> <p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p> </div> <a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></section></article>） - 嵌套
section时，子级必须用更小级数的标题（如父<h2></h2>，子用<h3></h3>），否则大纲会混乱 - 别用
<h1></h1>在section里 —— 页面级<h1></h1>应唯一，section内部从<h2></h2>起始
section 和 article 的边界在哪
关键看内容是否「可独立分发」：article 是完整单元（如一篇新闻、一条评论、一个用户卡片），能脱离当前页面被 RSS 抓取或单独分享；section 是主题性分组，依赖上下文存在（如文章里的「背景」「方法」「结果」三节，拆开就失去逻辑闭环）。
- 一本书是
article，它的每一章是section - 首页上的「最新产品」列表是
section；每条产品卡片本身是article - 不要把整个
<main></main>包进一个section—— 这等于告诉浏览器“全页是一个章节”，反而削弱了内部结构
常见错误与调试线索
浏览器开发者工具的「Accessibility」面板会直接标出无标题的 section；Lighthouse 审计也会报 “section element does not have a title” 类警告。真实项目中最容易被忽略的是嵌套层级和标题连续性。
- 错误现象：
section里只有按钮+一行文字，或整个侧边栏被包成一个section—— 这类内容既无独立主题，也不出现在大纲中 - 错误现象：多个
section并列却用了相同级数的标题（如全用<h2></h2>），导致大纲扁平、跳转锚点失效 - 调试建议：用
document.querySelectorAll('section')检查每个是否都有querySelector('h2, h3, h4, h5, h6')，再人工确认标题是否真能概括该区块
真正难的不是写对标签，而是每次写 section 前，停下来问一句：这块内容，有没有名字？别人能不能只看标题就明白它要讲什么？如果答案模糊，就先别动它。
