<main>必须唯一且只包核心内容，因其是辅助技术导航锚点而非视觉容器；多个或包裹非主内容会导致屏幕阅读器跳过或定位错误，冗余遍历拖慢语音响应。
语义化 HTML 本身不直接提升运行时性能（比如页面加载速度或 JS 执行效率），但它能显著降低可访问性修复成本、减少 CSS/JS 适配负担，并避免因结构混乱引发的隐性性能问题——比如屏幕阅读器被迫遍历冗余 DOM 节点，或搜索引擎反复解析无意义的 <div> 堆叠。
为什么必须唯一且只包核心内容
<main> 是辅助技术的导航锚点，不是视觉容器。屏幕阅读器按 M 键跳转时，只会找第一个合法的 <main>；若页面中存在多个，或它包裹了广告、侧边栏、弹窗等非主内容，读屏工具要么跳过、要么定位错误，用户得手动听完整页才能找到正文。
- 常见错误：Next.js 布局组件里写一个
<main>，子页面又渲染一个；<main>里塞了顶部 banner + 左侧菜单 + 内容区 - 正确做法：全 DOM 中仅一个
<main>，且只包含用户真正要操作/阅读的部分（如商品列表、表单主体、文章正文） - 性能影响：冗余
<main>不增加字节大小，但会让辅助技术多做无效 DOM 遍历，拖慢语音导航响应
section 和 article 的误用会污染文档大纲
<section> 不是 <div> 的语义升级版，它是为「有标题的逻辑分段」准备的；<article> 则代表可独立分发的内容单元。滥用会导致屏幕阅读器生成大量无意义导航节点，用户无法快速定位重点。
- 错误写法：
<section><p>欢迎关注我们</p></section>（无标题、不可分发、无结构意义） - 判断标准：这块内容是否自带
<h2>–<h6>？能否被 RSS 抓取或邮件推送？是否属于已有语义标签范畴（如页脚用<footer>）？ - SEO 影响：Google 会参考文档大纲（outline）评估内容权重，标题层级断裂或节点泛滥会弱化主内容识别
图片和表单的语义缺失会触发重复 DOM 操作
缺失 alt 的 <img> 或未绑定 <label> 的 <input>，表面看只是可访问性问题，实则常迫使开发者后期用 JS 补救——比如监听焦点事件手动播报提示、动态插入 ARIA 属性，这些额外逻辑会增加运行时开销和维护风险。
立即学习“前端免费学习笔记（深入）”；
- 图片必须用
<figure>包裹，alt不可为空（装饰图除外），<figcaption>必须存在且与<img>同级 - 表单控件必须显式绑定
<label for="id">或嵌套写法：<label>邮箱<input type="email"></label> - 常见坑：用 CSS 视觉对齐代替语义绑定；把
title当aria-label用（title不被所有读屏支持）
最容易被忽略的点是标题层级断裂：页面从 <h2> 开始、<main> 外堆了三个 <h1>、小节用了 <h3> 但主内容还没出现 <h2>——这会让辅助技术生成错乱的大纲，比不用语义标签更伤可访问性。
