不该用<section>的情况：无标题、不可独立分发、无独立语义；<main>必须唯一且为<body>直接子级；图片、表单等需正确语义化；标题层级必须连续。
什么时候不该用 <section>
最常见误用就是把没标题、不可分发、也没独立语义的块硬套 <section>。比如一个纯文字提示：<section><p>欢迎关注我们</p></section>——它没 <h2> 到 <h6>，不能被 RSS 抓取，也不比 <div> 多传达任何信息，反而让屏幕阅读器多生成一个“区域”导航项。
判断标准就三条：
- 这块内容有没有自己的
<h2>–<h6>？没有就别用 - 它能否独立分发（比如邮件推送、RSS）？不能就不是
<section> - 已有更精确标签吗？比如页脚用
<footer>、联系信息用<address>，就别再包一层<section>
<main> 只能出现一次，且不能嵌套在 <article> 或 <section> 里
规范明确要求：整个文档中 <main> 应唯一，且必须是顶级内容容器。如果把它塞进 <article> 里，比如 <article><main>...</main></article>，会导致可访问性树混乱——NVDA 等读屏软件只聚焦第一个 <main>，其余被跳过。
正确做法：
立即学习“前端免费学习笔记（深入）”；
- 全站主内容区用一个
<main>包裹，放在<body>直接子级 - 文章、新闻这类独立内容，用
<article>，里面用<header>/<footer>组织，不套<main> - 侧边栏、广告位等辅助内容，用
<aside>，不是<section>或<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>
这类补丁式语义后期极易失效——JS 逻辑一改，ARIA 同步漏掉，可访问性就回归零点。
标题层级断裂比不用语义标签更伤可访问性
页面从 <h2> 开始、<main> 外堆了三个 <h1>、小节用了 <h3> 但主内容还没出现 <h2>……这些看似细小的断裂，会让屏幕阅读器彻底迷失上下文。
检查要点：
- 每个
<section>或<article>必须有且仅有一个<h2>–<h6>作为标题（不能靠 CSS 视觉模拟） -
<h1>建议全页只出现一次，代表页面核心主题 - 层级必须连续：有
<h2>才能跟<h3>，跳过<h2>直接<h3>是无效结构
真正难的不是选对标签，而是让每个标签都承担起它该有的语义责任——一旦松懈，语义化就从增强变成干扰。
