应优先依据语义匹配判断HTML结构合理性，而非标签频次或外观相似性；W3C Validator可检测跳级标题、非法嵌套等影响无障碍与SEO的问题，并指出语义层级断裂等深层缺陷。
直接看语义是否匹配内容意图，而不是数标签用了几次或长得像不像。
用 W3C Validator 检查结构合法性
它不只报错，还会指出 <h2> 后面跳 <h4> 这类“跳级”问题，以及 <p> 里嵌 <div> 这种非法嵌套。这类错误在浏览器里可能渲染正常，但会破坏无障碍树、影响 SEO 权重分配。
常见误判点：
-
<h1>出现在<header>外但没被包裹进<section>或<article>，W3C 会警告 “heading level should be less than or equal to next level”，本质是语义层级断裂 -
<ul>里混了<p>—— HTML 规范只允许<li>作为直接子元素，<p>必须放在<li>内部 -
<img>缺alt属性时，W3C 不报 error 而是 warning，但屏幕阅读器会读成 “image”，实际已构成可访问性缺陷
检查文本标签是否被滥用（比如 <b> 和 <i>）
<b> 和 <i> 没被废弃，但它们的语义很窄：<b> 表示“不带额外重要性的突出显示”，<i> 表示“不同语气或语境”（如外语词、术语、船名）。日常加粗/斜体需求，90% 应该用 CSS 的 font-weight 或 font-style 控制。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 用
<b>替代<strong>：前者无强调语义，后者明确表达“内容重要性提升”，搜索引擎和读屏软件都会识别 - 把
<i>当作“斜体开关”乱用，比如标题里写<h2><i>新品发布</i></h2>，这会让辅助技术误判为术语而非视觉样式 -
<em>和<strong>混用却不分层级：连续嵌套<strong><em>…</em></strong>在规范中合法，但语义上冗余，应优先靠 CSS class 区分视觉强度
验证 DOM 树是否符合预期结构
浏览器开发者工具的 Elements 面板能直观看到最终解析结果，但要注意：JS 动态插入的 HTML 如果有语法错误（比如漏闭 <span>），浏览器会自动修复，DOM 树和你写的源码已经不一致。
实操建议：
- 在控制台运行
document.querySelectorAll('p > div').length，如果返回非 0，说明存在非法嵌套，需回溯模板或 JS 拼接逻辑 - 检查
<main>是否只有一个，且没被包在<section>或<article>外——多个<main>是明确违反规范的 - 用
document.body.children查看顶层元素顺序，确认<header>、<main>、<footer>是否按逻辑流排列，而非全靠 CSSposition: absolute强行挪位
真正难的不是识别标签是否存在，而是判断它出现在那个位置是否承载了恰当的语义责任。比如一个 <h3> 放在 <aside> 里，它和主内容流的层级关系就完全独立——这种结构对爬虫和读屏软件意味着“这是附属信息”，不能指望它参与主标题大纲。这点，任何自动化工具都只能提示，没法替你决策。
