html语法合法性须先通过w3c验证器检查，它严格校验静态html结构（如缺alt、非法嵌套、doctype缺失），但不执行js、不解析动态dom、不校验css或可访问性；验证对象必须是构建后的dist/index.html，而非含模板语法的源码，且需区分硬性错误（如内嵌）与框架指令误报（如v-bind:src）。
HTML语法是否合法：先过W3C验证器这关
HTML质量的第一道门槛是语法正确性。很多看似能渲染的页面，其实藏着大量隐性错误，比如 <div> 忘记闭合、<code><img> 缺少 alt、<button></button> 没写 type 属性，这些都会在可访问性、SEO 和部分浏览器兼容性上埋雷。
实操建议：
- 用 W3C Markup Validation Service（
validator.w3.org）跑一次，不是“没报错就过关”，而是重点关注Warning级别提示——比如Attribute “role” is unnecessary for element “nav”这类提示说明你误用了语义标签 -
<script></script>标签不要写成<script type="text/javascript"></script>（HTML5 中冗余），也不要用language属性（已废弃） - 自闭合标签如
<img>、<input>在 HTML5 中不强制加斜杠，但统一写成<img src="x" alt="">或全不加，别混用
语义化是否到位：别让 <div> 扛下所有责任
<p>语义化不是“用了 <code><header></header> 就算达标”，而是看结构是否真实反映内容逻辑。一个常见误区是把 <section></section> 当容器盒乱套，结果整个页面全是 <section></section> 套 <div>，反而破坏了层级。
<p>实操建议：</p>
<ul>
<li>
<code><main></main> 必须且只能出现一次，且不应嵌套在 <article></article> 或 <aside></aside> 内
<nav></nav> 仅用于导航链接集合，页脚的“关于我们”“联系方式”不算导航，别硬塞<ul></ul>/<ol></ol>，哪怕只是横向排列的图标导航——CSS 可以让它看起来不像传统列表，但语义不能丢<table>，用 <code><div> + flex 模拟表格布局会彻底丢失屏幕阅读器支持
<h3>可访问性是否落地：不只是加个 <code>alt 就完事
很多团队把可访问性当成“加完 alt 就交差”的任务，但实际问题常出在交互层：比如用 <div onclick="xxx"> 代替 <code><button></button>，键盘用户根本无法聚焦或回车触发；又或者用 CSS 隐藏文本（text-indent: -9999px）却不提供 screen reader-only 替代方案。
实操建议：
- 所有可交互元素（
<a></a>、<button></button>、<input>）必须能被键盘Tab聚焦，且有清晰焦点样式（别用outline: none一删了之） -
<img>的alt值为空字符串（alt=""）仅适用于纯装饰图；图标按钮的alt应描述功能（如alt="搜索"），不是“放大镜图标” - 表单控件必须有配套
<label></label>，用for/id关联，或直接包裹控件——别只靠 placeholder 当提示 - 颜色对比度至少满足 WCAG AA 级（文本与背景比 ≥ 4.5:1），可用工具如 axe DevTools 或 Lighthouse 检查
性能影响是否被忽略：DOM 节点膨胀和资源加载顺序
HTML 本身不执行逻辑，但它决定了浏览器解析、构建 DOM、触发渲染的路径。一个典型问题是过度嵌套：比如用 5 层 <div> 包裹一个按钮，不仅增加内存占用，还会拖慢 CSS 选择器匹配速度（尤其带后代选择器如 <code>.container div button）。
实操建议：
- 避免无意义的 wrapper：
<div class="wrapper"><div class="inner"><p>Hello</p></div></div>→ 直接给<p></p>加 class -
<script></script>标签优先用defer（外部脚本）或async（独立逻辑），避免阻塞 HTML 解析；内联脚本若必须放，加type="module"自动获得 defer 行为 - 图片懒加载用原生
loading="lazy"，但注意它对<img>在视口内首屏位置的判断有延迟，关键首屏图别依赖它 - 减少不必要的
data-属性——每个属性都是内存开销，JS 不读取的就别写
真正卡住 HTML 质量的，往往不是某条规则没遵守，而是多个小决策叠加后的结构性退化：比如为赶工期用 <div> 堆出所有结构，再靠 JS 补交互、CSS 强撑语义、ARIA 硬凑可访问性——这种债迟早要还，而且越拖越重。</div>
