旧版HTML结构升级本质是用语义标签校准内容意图；需先识别class伪装、div占比超60%、Tab顺序错乱三类信号，再针对性替换header/nav/main等标签，保留纯样式或JS钩子用div，嵌套层级宜≤4层，最后通过无CSS阅读验证逻辑完整性。
旧版HTML文档结构升级不是重写，而是用语义标签“校准”内容意图——只要结构没对齐内容逻辑，后续所有样式、JS、SEO优化都会打折扣。
怎么判断该不该动结构
别一上来就改标签。先看这三类信号：
- 用开发者工具选中某个区块，发现它只靠
class="header"或class="nav-wrap"表达语义，没有对应原生标签 -
document.querySelectorAll("div").length超过页面总元素数的60%，且多数div没承载业务逻辑，只是为CSS套壳 - 键盘Tab焦点顺序跳脱视觉流（比如先到页脚再跳回导航），说明DOM顺序与内容流不一致
哪些div必须换，哪些可以不动
替换不是为了“看起来更现代”，而是让浏览器、爬虫、屏幕阅读器能准确理解内容角色：
-
<header></header>和<footer></footer>必须是body或最近的article/section的直系子元素；嵌套错层会导致辅助技术误读 -
<main></main>全局只能出现一次，且不能是<article></article>、<aside></aside>、<nav></nav>的子元素；如果页面是仪表盘多卡片布局，应改用多个<section></section>+aria-labelledby -
<nav></nav>只包裹主导航链接组；面包屑、分页、文章内锚点链接不属于它，误用会干扰NVDA等读屏软件的快捷导航 - 一个纯样式容器（如
<div class="clearfix">）或JS操作钩子（如<code><div id="modal-root">）没独立语义，保留<code>div完全合理嵌套层级和DOM规模的实际边界
语义正确但嵌套过深，一样会拖慢渲染、增加维护成本：
立即学习“前端免费学习笔记（深入）”；
- 实测中，单个
<section></section>下子元素超50个，滚动时重排明显卡顿；可用document.querySelectorAll("*").forEach(el => console.log(el.tagName, el.children.length))快速扫描异常节点 - DOM层级建议控制在4层以内：比如
body→<main></main>→<article></article>→<p></p>；超过4层时，优先考虑用display: grid或flex替代包裹容器 - 动态列表插入大量项时，用
DocumentFragment批量操作，避免每加一项都触发DOM重排
最容易被忽略的其实是验证环节：关掉CSS看纯HTML是否仍能按逻辑顺序阅读，这个测试比任何工具报告都直接——结构没立住，其他全是空中楼阁。
- 实测中，单个
