用对语义标签比“多用”更重要：错用（如当用、重复嵌套、标题跳级、缺alt）会破坏结构解析，损害可访问性与seo；须严格遵循主题独立性、嵌套规则及工具校验。
HTML语义化不是“加分项”，而是SEO和可访问性的基础门槛。不修复语义错误，再好的关键词堆砌也难被搜索引擎正确理解。
如何快速识别语义标签误用
常见错误不是没用语义标签，而是用错场景。比如把整个用户列表包进一个
-
<nav></nav>里塞了搜索框、登录入口：导航只负责跳转链接，功能控件应放在<header></header>或<form></form>内 -
<main></main>嵌套在<article></article>或<section></section>里：每个页面只能有一个<main></main>，且不能被其他结构标签包裹 -
<section></section>没配标题（<h2></h2>–<h6></h6>）：没有标题的<section></section>大概率该换成<div> <li> <code><aside></aside>里放广告或无关推荐：它必须与主内容存在逻辑关联，比如“相关文章”“作者简介” - 用 Chrome DevTools 的「Accessibility」面板 → 「Heading level」树形视图，一眼看出是否连续
- 服务端渲染或 Markdown 转 HTML 时，加 remark-lint 插件校验：
remark-lint-heading-increment - 禁止用 CSS 改变视觉大小来“伪装”层级，
<h2></h2>就是<h2></h2>，别写成<div class="h2"> <h3>alt 和 label 缺失等于功能缺失</h3> <p>这不是“体验不好”，是部分用户根本无法操作页面。搜索引擎也会因此降低页面可信度评分。</p> <ul> <li> <code><img>的alt=""只用于纯装饰图；带信息的图标（如“PDF下载”按钮里的图标）必须写明用途，例如alt="下载PDF文档" -
<input>动态生成时忘了设id，导致<label for="xxx"></label>失效——JS 创建元素后必须同步补上唯一id - 用
aria-label替代<label></label>时，要确保键盘 Tab 焦点能落到该控件，并触发回车/空格行为 - W3C Validator（
https://validator.w3.org/nu/）查语法和结构性错误，比如<main></main>是否嵌套在<header></header>内 - Chrome DevTools → Elements 面板确认语义标签真实存在，没被 JS 或框架意外替换成
<div> <li>Lighthouse 的「Accessibility」审计自动标出 <code>alt缺失、颜色对比度不足等机器可检测项
标题层级断裂怎么查
跳级使用标题（如<h1></h1>后直接<h4></h4>）会让搜索引擎和屏幕阅读器误判内容结构，不是样式问题，是语义断层。
验证必须用工具交叉比对
人工看容易漏，尤其嵌套规则和边界情况。单靠 W3C Validator 不够，得配合浏览器真实解析结果。
最容易被忽略的是语义标签的“主题独立性”：每个 <article></article> 应能单独被 RSS 抓取、被社交平台分享；每个 <section></section> 应有明确主题并自带标题。没满足这两点，就别硬套语义标签——宁可用 <div>，也别用错。</div>
