不该用的情况：无标题、不可独立分发、无独立语义；必须唯一且为直接子级；图片、表单等需正确语义化；标题层级必须连续。
什么时候不该用 <section></section>
最常见误用就是把没标题、不可分发、也没独立语义的块硬套 <section></section>。比如一个纯文字提示：<section><p>欢迎关注我们</p></section>——它没 <h2></h2> 到 <h6></h6>，不能被 RSS 抓取，也不比 <div> 多传达任何信息，反而让屏幕阅读器多生成一个“区域”导航项。
<p>判断标准就三条：</p>
<ul>
<li>这块内容有没有自己的 <code><h2></h2>–<h6></h6>？没有就别用
<section></section>
<footer></footer>、联系信息用 <address></address>，就别再包一层 <section></section>
<main></main> 只能出现一次，且不能嵌套在 <article></article> 或 <section></section> 里
规范明确要求：整个文档中 <main></main> 应唯一，且必须是顶级内容容器。如果把它塞进 <article></article> 里，比如 <article><main>...</main></article>，会导致可访问性树混乱——NVDA 等读屏软件只聚焦第一个 <main></main>，其余被跳过。
正确做法：
- 全站主内容区用一个
<main></main>包裹，放在直接子级 - 文章、新闻这类独立内容，用
<article></article>，里面用<header></header>/<footer></footer>组织，不套<main></main> - 侧边栏、广告位等辅助内容，用
<aside></aside>，不是<section></section>或<main></main>
图片、表单、按钮的“伪语义”比无语义更危险
加了 title 属性、CSS 对齐、onclick 就以为“有语义”？实际是埋雷。
典型陷阱：
-
<img src="logo.png" title="公司Logo">：鼠标悬停才显示，键盘/语音用户完全感知不到；必须用alt="公司Logo" -
<input id="email"><span>Email地址</span>：视觉上对齐了，但读屏听不到关联；得用<label for="email">Email地址</label>或嵌套写法 -
<div onclick="submitForm()">提交</div>：缺role="button" tabindex="0" aria-label，焦点不可达、行为不可控；直接用<button></button>
这类补丁式语义后期极易失效——JS 逻辑一改，ARIA 同步漏掉，可访问性就回归零点。
标题层级断裂比不用语义标签更伤可访问性
页面从 <h2></h2> 开始、<main></main> 外堆了三个 <h1></h1>、小节用了 <h3></h3> 但主内容还没出现 <h2></h2>……这些看似细小的断裂，会让屏幕阅读器彻底迷失上下文。
检查要点：
- 每个
<section></section>或<article></article>必须有且仅有一个<h2></h2>–<h6></h6>作为标题（不能靠 CSS 视觉模拟） -
<h1></h1>建议全页只出现一次，代表页面核心主题 - 层级必须连续：有
<h2></h2>才能跟<h3></h3>，跳过<h2></h2>直接<h3></h3>是无效结构
真正难的不是选对标签，而是让每个标签都承担起它该有的语义责任——一旦松懈，语义化就从增强变成干扰。
