语义化html需严格遵循规范：必须唯一且仅含核心内容，需有标题，须可独立分发，表单和图片须正确标注，标题层级不可断裂，嵌套不宜过深。

语义化 HTML 本身不能自动让页面可访问，但写错一个 <main></main> 或漏掉一个 alt，就足以让屏幕阅读器用户卡在首页三分钟找不到正文。

为什么 <main></main> 必须唯一且只包核心内容

屏幕阅读器按 M 键跳转时，只认 DOM 中第一个合法的 <main></main>；如果 Next.js 布局里写了一个，子页面又渲染一个，实际就是两个——辅助技术会忽略第二个，或直接跳进广告区。

• 错误做法：<main><header><nav><aside><article>…</article></aside></nav></header></main>（把导航、侧边栏全塞进去）
• 正确做法：全页面仅一个 <main></main>，子元素只能是 <header></header>、<section></section>、<article></article> 等，且不包含 banner、菜单、弹窗
• 验证方式：用 axe 浏览器插件扫描，报 ARIA: main landmark is not unique 就得立刻修

<section></section> 和 <article></article> 不是 <div> 的美化替代品 <p>滥用 <code><section></section> 会导致屏幕阅读器生成一堆无意义的“区域”节点，用户用 R 键遍历时全是空标题；<article></article> 则要求内容能独立存在（比如 RSS 抓取、邮件推送），不是每张卡片都配得上它。

• 错误写法：<section><p>欢迎关注我们</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a> <p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></section>（没标题、不可分发、无结构意义）
• 判断标准：这块内容是否自带 <h2></h2>–<h6></h6>？能否被 RSS 抓取？是否属于已有语义范畴（如页脚该用 <footer></footer>）？
• axe 会提示 Section lacks heading，别当警告忽略

表单和图片的语义缺失会触发 JS 补救逻辑

表面看只是可访问性问题，实则埋下运行时性能隐患：缺 alt 的 <img> 或没绑定 <label></label> 的 <input>，后期常靠 JS 监听焦点、动态插入 ARIA 属性来补救——这些逻辑增加 bundle 体积、拖慢首屏交互。

• <img> 必须带 alt（装饰图除外，写 alt=""）；<figure></figure> 和 <figcaption></figcaption> 要同级
• 表单控件必须显式绑定：<label for="email">邮箱</label><input id="email" type="email">，或嵌套写法：<label>邮箱<input type="email"></label>
• 禁用 title 替代 aria-label——title 不被所有读屏支持，且 hover 才显示，对键盘用户无效

标题层级断裂比不用语义标签更危险

页面从 <h2></h2> 开始、<main></main> 外堆了三个 <h1></h1>、小节用了 <h3></h3> 但主内容还没出现 <h2></h2>，这会让辅助技术生成错乱大纲，用户听到的是一串无法定位的“第 7 区域”“第 12 区域”，而不是“产品介绍”“价格方案”。

最容易被忽略的是嵌套过深：三层以上 <div> 堆叠不仅让 <code>document.querySelector('main section article p') 变得脆弱，还会让 axe 检测失效——它可能根本扫不到内部节点。