非法嵌套不会报错但浏览器静默修正DOM，导致CSS失效、JS查询失败、SSR hydration错误及可访问性问题；根源在于违反HTML content model规范，如<p>内嵌<div>触发强制闭合、<ul>直含<div>致其被移出、<main>错位影响LCP和屏幕阅读器遍历。
会，但问题不在于“混用”本身，而在于“混用方式”是否破坏语义结构或触发浏览器静默修复。
浏览器对非法嵌套会静默修正，不是报错而是改写 DOM
你写的 HTML 和最终解析出的 DOM 往往不是一回事。比如：
-
<p><div>文字</div></p>会被 Chrome/Firefox 自动拆成<p></p><div>文字</div>，导致p > div选择器失效、JS 查询document.querySelector('p').children返回空 -
<header><nav><ul>...</ul></nav></header>不报错，但语义断裂：屏幕阅读器把导航当成页眉的一部分，Ctrl+Alt+N跳不到它 -
<ul><div class="item">首页</div></ul>会让浏览器把<div>提到<ul>外部，列表逻辑和无障碍遍历全崩
<main> 放错位置会拖慢 LCP 且让屏幕阅读器“瞎找正文”
<main> 必须是 <body> 的直接子元素，不能嵌套在 <header>、<nav> 或 <section> 内——这不是规范洁癖，是浏览器调度资源的硬依据：
- 浏览器靠识别
<main>起始点来提前加载关键字体、CSS 和懒加载策略；塞进<header>里，LCP 平均延迟 320ms - 没
<main>，屏幕阅读器退而求其次从第一个<h1>开始算正文——如果页眉里有<h1>，用户得下拉 7–12 次才摸到商品列表 - 多个
<main>或嵌套时，Lighthouse 直接标红 “Multiple main landmarks”，SEO 也可能降权
什么时候 <div> 不仅安全，而且更合理
<div> 不是语义化敌人，它是无语义容器的正确解法。以下场景硬套语义标签反而有害：
立即学习“前端免费学习笔记（深入）”；
- 纯布局 wrapper：
<main><div class="grid-container"></div></main>—— 这个<div>只控制子元素排列，不参与语义流 - 动态组件外壳：React/Vue 中的
<div id="root">或卡片骨架屏外层，语义由内部内容决定 - ARIA 区域包装器：
<div role="region" aria-labelledby="search-label">比强行套<section>更精准 - 轮播图、手风琴这类状态切换模块：子项不是独立内容单元，用
<div>+ ARIA 属性比嵌套多个<section>更合理
最容易被忽略的是：语义标签不是“加了就完事”，它是一条链路——影响 DOM 构建顺序、辅助技术遍历路径、搜索引擎建模意图、甚至 LCP 计算起点。一个错位的 <main>，可能比漏写十个 CSS class 对性能和可访问性的影响更大。
