必须使用语义化标签而非div冒充：document.querySelector('main')会返回null；Lighthouse报错难定位；main须全局唯一且不可嵌套；header/nav/main自带快捷键与大纲生成能力；div仅适用于纯布局、样式隔离或框架根节点。

div 替代 header/nav/main 会导致 querySelector 失效 浏览器和辅助技术只认标签名，不解析 class 名。写

，document.querySelector('main') 就永远返回 null；Lighthouse 报 “main element is missing” 却查不到缺失位置，往往就是这类冒充行为被构建工具（如 html-webpack-plugin）二次包裹后更难定位。

• <main></main> 必须全局唯一且不能嵌套在 <section></section> 或 <article></article> 内，而 <div class="main"> 完全不受约束，容易误嵌套 <li> <code><nav></nav> 自带键盘快捷支持（如 Ctrl+Alt+N），<div role="navigation"> 虽能被读屏器识别，但不继承原生导航的快捷键与焦点管理 <li> <code><header></header> 可嵌套在 <article></article> 内表达局部头部，<div class="header"> 没有上下文能力，无法参与文档大纲生成 <h3>SEO 和屏幕阅读器根本“看不见” div 包裹的语义 搜索引擎对 <code><main></main> 内的 <h1></h1> 赋予更高权重，对 <div class="main"><h1> 不做特殊处理；屏幕阅读器用户按快捷键跳转时，依赖的是 <code><nav></nav>、<aside></aside> 这类标签本身，不是 class 名。
  • <p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill8272" title="anything-to-html"><img src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill8272" title="anything-to-html">anything-to-html</a> <p>将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p> </div> <a href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 是语义段落，<div> 包文字会被浏览器强制修正 DOM 结构（如 <code><p></p> <div>text</div> → 自动拆成 <p></p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <div>text</div>）
  • <time datetime="2026-08-25"></time> 提供机器可读时间，<div class="time">2026-08-25</div> 对爬虫和读屏器毫无意义
  • <article></article> 自带隐式 aria-roledescription="article"，而卡片式 <div class="card"> 即使加 <code>role="article" 也不等价

    深层 div 嵌套暴露的是语义缺失，不是布局问题 超过 3 层 <div> 嵌套（如 <code><div><div><div>内容</div></div></div>）90% 是语义没理清：本该用 <section><h2></h2> <p></p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></section> 的地方，硬靠 class 分层。

    • <ul></ul> 本身就是块级容器，不需要外层 <div class="list-wrapper"> <li> <code><header><h1></h1> <nav></nav></header> 天然支持 display: flex，无需额外 <div class="header-inner"> <li>SSR 场景下，每多一层无意义 <code><div> 都增加 HTML 字节数，首屏解析时间可测出延迟（尤其移动端） <h3>div 不是“错”，而是“用错地方才危险”<code><div> 的本质是“无语义容器”，这恰恰是它的不可替代性。它安全的使用场景非常明确： <ul><li>仅作为 CSS 布局层：如 <code><main><div class="grid-container"></div></main>，该 <div> 不参与语义层级 <li>在已有语义标签内部做样式隔离：如 <code><article><div class="article-body"> <p></p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> </div></article>，前提是没把 <h1></h1> 或 <figure></figure> 错包进这一层
    • 框架根节点：如 React 的 <div id="root"></div>，完全脱离文档语义流

    危险信号很直接：一个 <div class="card"> 实际承载一条新闻，却没升级为 <code><article></article>；多个 <h2></h2> 被包在同一个 <div> 里，却没用 <code><section></section> 划分逻辑区块。

    语义标签不是为了“看起来更现代”，而是让浏览器、爬虫、读屏器、甚至你半年后的自己，能一眼看懂这个节点“到底在干什么”。强行用 <div> 模拟，等于主动放弃 DOM 的结构契约。</div>