高可用html页面的核心是良构性与语义有效性；标签名须小写、属性值须加引号、空元素宜自闭合、&须转义为&。
高可用 HTML 页面的核心不是“多炫的交互”，而是结构是否扛得住解析、渲染、脚本注入、辅助技术读取和长期维护——重构必须从良构性（well-formedness）和语义有效性（validity）两个硬门槛开始。
确保 HTML 良构：浏览器解析不出错的底线
很多页面在 Chrome 看着正常，但在 Safari 或旧版 Edge 里布局错乱、document.querySelector 找不到元素、甚至 innerHTML 被浏览器自动修正出意料之外的 DOM 树，根源常是 HTML 不良构。
- 所有标签名必须小写：
<div> 合法，<code><div> 在 XHTML 模式或某些 XML 工具链中会直接报错 <li>属性值必须加引号：<code>class="header"可靠，class=header遇到空格或特殊字符时极易断裂 - 空元素必须自闭合或显式闭合：
<img src="a.jpg">在 HTML5 中允许，但若混用 XHTML 解析逻辑（如通过DOMParser），推荐统一写成<img src="a.jpg"> - 所有
&必须转义为&，所有必须转义为 <code>，否则可能被误解析为标签起始 - 必须有且仅有一个根元素：
是唯一合法根；多个同级<div> 直接放在 <code>下虽不报错，但破坏树结构唯一性，影响 SSR/SSG 渲染一致性用对语义标签：不是换名字，是改契约
把
<div class="main"> 改成 <code><main></main>不只是“看起来更现代”，它改变了三件事：浏览器默认样式继承规则、屏幕阅读器的导航层级、搜索引擎对内容主次的判定依据。-
<main></main>应且仅应出现一次，代表页面核心内容；重复使用会触发 Lighthouse 的document-multiple-main-elements告警 -
<section></section>必须有标题（<h2></h2>–<h6></h6>），否则语义退化为普通容器——它不是<div> 的高级别替代品 <li> <code><article></article>表示可独立分发、复用的内容单元（如博客正文、新闻稿），嵌套在<section></section>里没问题，但反过来不合理 -
<aside></aside>不等于“右边那栏”，而是与当前上下文相关但非核心的补充信息；纯广告位或无关推荐应避免用它 - 避免
<nav></nav>套<nav></nav>：主导航用一个<nav></nav>，页脚链接组建议用<footer></footer>内的<ul></ul>，而非嵌套导航 - 用浏览器 DevTools 的
Elements面板右键节点 →Copy → Copy outerHTML抽样检查局部结构，确认是否真需要 4 层<div> 包裹一个按钮 <li>CSS 布局优先用 <code>display: flex或display: grid，而非靠多层<div> 实现居中或栅格——前者扁平，后者膨胀 <li>动态插入内容时，用 <code>DocumentFragment批量挂载，避免每条数据都触发一次重排；单个容器子节点数建议控制在 50 以内 - 移除“仅为加 class”而存在的
<div>：例如 <code><div class="card"><div class="card__body">…</div></div>中，若card__body能直接承担样式职责，就砍掉外层别忽略可访问性锚点：结构即无障碍基础
很多团队把 ARIA 当“补丁”打，结果越打越乱。其实 80% 的可访问性问题，靠结构就能解决——前提是结构本身没绕弯子。
-
<h1></h1>必须存在且唯一，代表页面主题；后续标题必须严格按逻辑降级，跳过<h2></h2>直接用<h4></h4>会让屏幕阅读器用户彻底迷失 - 所有交互控件（
<button></button>、<a></a>、<input>）必须有明确的可感知文本；<button><img src="x.svg"></button>缺少aria-label或<span class="visually-hidden">关闭</span>，就会被读作“按钮”而无上下文 <table> 必须有 <code><thead> 和表头 <code><th>，否则表格数据无法被正确关联；纯展示用栅格请用 <code>div + grid，别滥用<table><li>不要给 <code><div> 加 <code>role="button"后忘了处理Enter/Space键响应和焦点管理——原生<button></button>自带这些，结构选对了，代码量反而少真正难的不是学会用
<main></main>或<section></section>，而是在业务压力下坚持不写“能跑就行”的嵌套、不为了赶工期跳过良构检查、不在没有标题的情况下硬塞<section></section>。这些地方一旦松动，后面加多少 ARIA、优化多少 JS，都只是给裂缝贴胶带。
-
控制嵌套深度与 DOM 规模：性能和可维护性的隐形瓶颈
超过 5 层嵌套的 HTML 结构，不仅让 CSS 选择器变脆弱（比如
div div div div p），还会显著拖慢首次渲染时间（FCP），尤其在低端设备上。更隐蔽的问题是：DOM 节点数超 1500 个时，React/Vue 的 diff 效率会断崖下降，而开发者工具审查元素也变得卡顿。 -
