html标签语义化问题无法靠肉眼判断，必须依赖插件在编辑阶段拦截；仅写或不等于语义正确，关键看上下文是否符合规范，如缺失、标题跳级、img缺alt、input无label等均需htmlhint或axe等工具主动校验并结合业务逻辑甄别。
HTML 标签语义化问题无法靠肉眼判断，必须依赖插件在编辑阶段拦截 —— 仅靠手动写 <header></header> 或 <nav></nav> 不等于语义正确，关键要看上下文是否符合规范。
HTMLHint 启用 alt-require 和 label-required 规则
很多开发者以为加了 <img> 就算完成，但没配 alt 属于严重可访问性缺陷。HTMLHint 的 alt-require 规则能强制检查所有 <img>、<area>、<input> 是否含非空 alt 值。
- 在项目根目录新建
.htmlhintrc，至少启用："alt-require": true、"input-requires-label": true、"html-lang-require": true -
input-requires-label会标记所有孤立<input>，但注意：它不检查aria-labelledby等替代方案，只认显式<label for="xxx"></label>或包裹结构 - 若用 Vue 单文件组件，需确认 HTMLHint 插件已配置
"htmlvalidate": { "includeLanguages": ["html", "vue"] }，否则<template></template>内部不生效
axe DevTools 扫描时忽略“结构性建议”类误报
axe 会报告如 “<div> 应替换为语义化标签” 这类提示，但它无法判断业务逻辑 —— 比如一个纯装饰性容器用 <code><div> 是合理且必要的。
<ul>
<li>右键 HTML 文件执行 <code>Analyze with axe 后，重点关注带 critical 或 serious 级别的结果，比如 landmark-one-main（缺失主内容区）、heading-order（标题层级跳变）
region 类警告（如 “页面缺少 <main></main>”），先确认是否真有独立主内容；若整个页面是仪表盘或弹窗，可忽略<my-card></my-card>）的语义，除非你显式声明 role 或用 is="xxx" 继承原生行为Auto Rename Tag 对语义标签重命名的边界限制
改 <section></section> 为 <article></article> 时，Auto Rename Tag 会同步闭合标签，但它不管语义是否合理 —— 把导航栏改成 <footer></footer> 也能成功重命名，但逻辑错误。
- 该插件只做字符串匹配，不解析 DOM 结构或上下文，所以它不能替代语义规则检查
- 在 JSX 或 Vue 中，如果模板被包裹在
v-if或ng-container里，重命名可能失效，因插件无法穿透条件渲染语法识别真实标签对 - 当标签嵌套过深（如超过 6 层）或文件 >500 行时，VS Code 1.85+ 版本会主动禁用自动重命名，此时需手动修改或拆分组件
真正卡住语义落地的，不是工具能不能扫出问题，而是开发者是否理解每条规则背后的用户场景 —— 比如为什么 <h2></h2> 后直接跟 <h4></h4> 是错的，不是因为语法违规，而是屏幕阅读器会跳过中间层级，导致信息断层。
