必须有标题（h2–h6），否则语义失效、可访问性受损、SEO无效；能命名的主题区块用，纯布局/交互容器用。
没标题的 <section></section> 就是废标签
浏览器文档大纲里它不出现，屏幕阅读器跳过它，Lighthouse 直接报 “<section></section> missing heading”，SEO 也基本不认。W3C 规范写的是 “should usually have a heading”，但现实是：没 <h2></h2>–<h6></h6> 的 <section></section>，语义就断了。
你写 <section><p>点击下载</p></section>，和写 <div><p>点击下载</p></div> 效果几乎一样——只是多敲了 8 个字符，还埋下可访问性隐患。
- 标题可以视觉隐藏，比如
<h3 class="visually-hidden">用户反馈</h3>，但不能省 -
<h1></h1>不该出现在<section></section>里（页面级唯一标题应属于整个文档） - 同一级多个
<section></section>必须逻辑并列，不能一个讲“安装”，一个讲“按钮颜色”
<section></section> 和 <div> 到底怎么选
<p>别看它们都能包内容，用错就影响结构解析。关键不是“要不要样式”，而是“这块内容能不能起名字”。 </p>
<ul>
<li>你能脱口说出它的主题名？比如「性能对比」「部署流程」「客户评价」→ 用 <code><section></section>
<div class="carousel-nav"> <li>页面里已有更具体语义标签时，别退化：导航用 <code><nav></nav>，页脚用 <footer></footer>，文章正文用 <article></article>，硬套 <section></section> 反而干扰解析 <section><nav></nav></section>、<section><form></form></section>（没标题，纯容器）嵌套 <section></section> 时标题层级必须递进
父 <section></section> 用了 <h2></h2>，子 <section></section> 就得用 <h3></h3>，不能全用 <h2></h2>。否则大纲视图里全是平级节点，屏幕阅读器无法建立父子关系。
立即学习“前端免费学习笔记（深入）”；
- 浏览器自动生成的大纲（DevTools → Elements → Outline）会把每个带标题的
<section></section>当作可折叠单元 - 如果子节标题跳级（比如父用
<h2></h2>，子用<h4></h4>），部分读屏软件可能跳过或误读 - 嵌套不宜超过两层：三层及以上容易让结构失焦，不如拆成更细粒度的并列
<section></section>
真正难的不是怎么写，而是写之前先想清楚主题名
很多问题根源不在语法，而在建模阶段没想清：“这段内容，别人一听到名字就懂它干啥吗？”
- 产品页的「核心功能」「技术参数」「客户案例」——每个都能命名、能摘要、能被锚点链接 → 天然适合
<section></section> - 首页轮播图的左右切换按钮容器、表单里的“确认密码”字段组、页脚里三个社交媒体图标 —— 它们没有独立主题，只是交互/布局单元 →
<div> 更诚实 <li>如果你犹豫要不要加 <code><section></section>，又一时想不出标题，大概率说明它不该是<section></section>
语义不是装饰，是结构契约。写 <section></section> 就等于告诉浏览器和辅助技术：“这里有个可命名、可跳转、可摘要的主题区块。” 没这个底气，就别签这份契约。
