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