仅用于有明确主题、能独立成文且需标题的内容，必须配～，不可替代或更具体语义标签，嵌套需层级合理，同级应逻辑并列。
<section></section> 不是用来“视觉分块”或“套样式”的，它只在内容有明确主题、能起标题、可被单独引用时才该用。
什么时候必须用 <section></section>？
核心判断就一条：这块内容抽出来，还能不能独立成文、被人理解？
- 能——比如「性能对比」「部署步骤」「用户反馈」，各自有
<h2></h2>或<h3></h3>标题，就该用<section></section> - 不能——比如轮播图的左右箭头容器、页脚里的社交媒体图标列表、仅为了加
margin的几个<p></p>，这些用<div> 更准确 <li>已有更具体语义的标签时，别退化成 <code><section></section>：导航用<nav></nav>，文章正文用<article></article>，侧边栏用<aside></aside>，页脚用<footer></footer> - 标题不一定要视觉可见，但必须存在：
<h3 class="visually-hidden">技术参数</h3>是合法且常见的做法 - 嵌套的
<section></section>必须保持标题层级合理：父<section></section>用<h2></h2>，子节用<h3></h3>，不能跳级或倒置 - 多个同级
<section></section>应逻辑并列，不是父子控制关系；否则容易让结构失焦 -
<section><button>提交</button><p>请确认信息</p></section>→ 没标题、无主题，纯交互容器，用<div class="form-actions"> <li> <code><section><nav>...</nav></section>→<nav></nav>已有明确语义，再包一层<section></section>反而干扰解析 - 整个
<main></main>只包一个<section></section>→ 削弱了分区意义，不如按真实章节拆成多个<section></section> - 为兼容 IE8 强行用
<section></section>→ 老 IE 不识别该标签，JS 查不到、CSS 不继承，真要支持就得用 HTML5 Shiv + 重置样式
为什么必须配 <h2></h2>～<h6></h6>？
没有标题的 <section></section> 在语义上是断裂的。屏幕阅读器无法识别它的主题，浏览器文档大纲里会显示为空节点，Lighthouse 也会报错。
常见错误写法与替代方案
这些看似“方便”的写法，实际破坏语义和可访问性：
真正难的不是怎么写 <section></section>，而是写之前先想清楚：这段内容有没有资格出现在文档大纲里？如果连自己都说不出它的主题名，那就别用。
