结论：<section> 不是用来“分块视觉区域”的，而是标记具备可命名性、独立导航价值的主题单元；无标题的 <section> 语义上等同于 <div>，仅多出字符；是否使用 <section> 取决于内容能否被命名（如“安装步骤”）、能否被锚点跳转或纳入文档大纲；无标题则无法被屏幕阅读器识别为独立节点，也难被搜索引擎提取主题意图。
直接说结论：<section></section> 不是用来“分块视觉区域”的，而是用来标记「能起名字、能进大纲、能被单独跳转或引用」的主题单元；没标题的 <section></section> 语义上等于 <div>，只是多打了几个字符。
<h3>什么时候必须用 <code><section></section> 而不是 <div>
<p>核心看内容是否具备可命名性与独立导航价值：</p>
<ul>
<li>这块内容别人一听到名字就懂它干啥 → 比如「安装步骤」「性能对比」「用户反馈」→ 适合 <code><section></section>
<div class="js-modal-trigger"> 更合适
<li>团队里有人把整个 <code><main></main> 套一层 <section></section>，里面再塞十几个无标题的子 <section></section> → 文档大纲直接扁平化，屏幕阅读器无法识别层级为什么 <section></section> 必须配 <h2></h2>–<h6></h6>
规范写的是“通常应有”，但现实是：没有标题的 <section></section> 在辅助技术中会被降级为普通流内容，搜索引擎也难提取其主题意图。这不是“建议”，是语义生效的前提。
- 标题不一定要视觉可见，可用
<h3 class="visually-hidden">用户活跃趋势</h3>隐藏但保留语义 - 嵌套时标题层级要递进：父
<section></section>用<h2></h2>，子<section></section>就该用<h3></h3>，不能全用<h2></h2> - 同一级多个
<section></section>应逻辑并列，比如「技术原理」「代码示例」「部署流程」；而「导航栏」「页脚」这类非主题内容，不该出现在这个层级
<section></section> 和 <article></article>、<aside></aside>、<div> 怎么选
<p>四者边界清晰，互不替代：</p>
<ul>
<li>
<code><article></article>：代表可独立分发的内容单元（如一篇博客、一条新闻、一个评论），内部可含多个 <section></section>
<section></section>：描述主内容下的主题区块（如文章里的「背景」「方法」「结果」），不可脱离上下文独立存在<aside></aside>：放与主内容相关但可分离的附属信息（术语解释、引用、作者简介），不是侧边栏布局容器<div>：纯样式或脚本用途，比如轮播图外层、Grid 布局 wrapper、JS 控制的弹窗遮罩
<p>最容易被忽略的一点：判断一个区块该不该用 <code><section></section>，不是看它“有没有边框”或“是不是视觉上分开”，而是问——它脱离当前页面，还能不能被 RSS 抓取、被锚点链接直接跳转、被文档大纲工具识别为独立节点？不能，就别硬套。
