标题必须唯一且不可省略，视觉隐藏可用visually-hidden或aria-label；section需有明确主题并独立可分发，article适用于可重用内容单元；嵌套层级不宜超两层，同级section须逻辑并列；无明确主题时优先使用div。
没标题的 <section></section> 就是废标签
它在屏幕阅读器里不可见，Lighthouse 会报「section missing heading」错误，浏览器大纲视图里显示为空节点——语义完全断裂。
你写 <section><p>配置步骤很简单</p></section>，和写 <div>
<p>配置步骤很简单</p> 效果一样，只是多敲了几个字符。<ul>
<li>标题必须是 <code><h2></h2>～<h6></h6>（不能用 <h1></h1>，页面只能有一个）
class="visually-hidden" 或用 aria-label 配合隐藏样式，但元素不能省 <section></section>，换 <div> 更诚实 <h3>
<code><section></section> 和 <article></article> 到底谁套谁
不是层级问题，是内容意图问题：
-
<article></article>是可独立分发、重用的内容单元（比如一篇博客、一条新闻、一个用户评论），自带隐含的语义边界立即学习“前端免费学习笔记（深入）”；
<section></section>是为组织服务的主题区块，依赖上下文存在，比如一篇<article></article>里的「技术原理」「代码示例」「性能对比」正确：一个
<article></article>里嵌多个<section></section>错误：用
<section></section>包着整篇<article></article>当唯一子元素混用风险：把客户评论列表整个塞进
<section></section>，而每条评论本该是独立的<article></article>，就丢掉了可抓取、可 RSS 订阅的语义
嵌套 <section></section> 的层级怎么不翻车
嵌套本身合法，但超过两层就容易让结构失焦，尤其对辅助技术和自动大纲提取工具。
父 <section></section> 用 <h2></h2>，子节必须用 <h3></h3>，再下一层用 <h4></h4>——跳级或平级（比如全用 <h2></h2>）会让大纲变成扁平列表，失去层次感。
- 同级
<section></section>必须逻辑并列：比如「部署步骤」「监控配置」「故障排查」，而不是「顶部导航」「页脚版权」这种非主题块 - 嵌套场景常见于长文档或仪表盘：主模块
<section><h2>订单分析</h2>...</section>→ 子模块<section><h3>今日趋势</h3>...</section> - 如果嵌套后某一层找不到合适标题，或者读者复制出去看不懂上下文，大概率该层不该是
<section></section>
什么时候老实用 <div> 反而是好习惯
<p><code><div> 不是语义缺陷，它是诚实的信号：这里没主题，只有样式、JS 钩子或临时分组。<ul><li>轮播图容器、弹窗遮罩层、下拉菜单外层、CSS Grid 布局项 —— 全部优先 <code><div class="carousel"> <li>导航栏别硬套 <code><section></section>，已有 <nav></nav>；页脚用 <footer></footer>；主内容区用 <main></main>
document.querySelector('.js-modal-trigger') 时，目标元素用 <div class="js-modal-trigger">，比塞进 <code><section></section> 干净得多 真正难的不是语法，是写标签前先想清楚：这块内容能不能被叫出名字、放进大纲、别人说“看第三 section”时你立刻知道指哪。没想清就先写 <div>，等主题浮现再重构。</div>
