<p>内嵌<div>会导致DOM结构被浏览器自动修正为兄弟节点，使CSS选择器和JS查询失效，并引发高度塌陷、响应式失效及无障碍阅读错乱；应使用W3C Validator校验并替换为合法元素。
为什么 <p> 里塞 <div> 会导致样式和 JS 失效
浏览器根本不会按你写的解析——<p> 只允许短语内容（如 <span>、<strong>），<div> 是流内容，被规范强制“踢出”。你写 <p>文字<div>区块</div></p>，实际 DOM 是两个兄弟节点：<p>文字</p> 和 <div>区块</div>。CSS 选择器如 p div 永远不匹配，JS 用 querySelector('p > div') 返回 null。
常见连锁现象包括：
- 父容器高度塌陷（
<div>被踢出后脱离文档流） - 响应式断点失效（媒体查询依赖的嵌套关系已不存在）
- 无障碍阅读顺序错乱（屏幕阅读器按修正后 DOM 朗读，而非源码顺序）
如何用 W3C Validator 快速定位首个非法嵌套
别靠肉眼或 Elements 面板猜——粘贴 HTML 片段到 validator.w3.org，选 “Validate by Input”。它不渲染，只校验 content model，报错精准到标签层级。
典型错误示例：
立即学习“前端免费学习笔记（深入）”；
-
Element div not allowed as child of element p→ 把<div>换成<span>或直接删掉外层<p> -
Element img is not closed→<img src="x">写成<img src="x"></img>，必须删闭合标签 -
Element ul not allowed here→ 常见于<div>直接子元素是<ul>，但父容器不是<nav>或<aside>等合法上下文
只修复第一条 Error，后续 Warning 很可能是它引发的连锁反应。
<main> 被 <section> 包裹会破坏语义导航
<main> 是全页唯一主内容声明，W3C 明确禁止被任何语义容器包裹。写成 <section><main>...</main></section> 看似结构清晰，实则让屏幕阅读器跳过 <main> 的快捷键（如 JAWS 的 m 键），SEO 工具也可能降权该区块。
正确做法只有两种：
- 主内容直接用
<main>包裹，内部再用<section>划分小节 - 若某块内容本身可独立分发（如一篇博客正文），优先用
<article>，而不是硬塞进<section>再包一层<main>
注意：<main> 不能出现在 <article>、<aside>、<nav>、<footer> 内部——这些本身就是 sectioning root，会截断 <main> 的语义作用域。
自定义标签如 <my-header> 不会自动获得语义
浏览器把所有自定义标签（含 <my-header>、<_header>）当普通 HTMLElement 处理：无障碍树中无 role 和 name，getComputedStyle(el).display 默认为 inline，不触发 sectioning root 行为。
这意味着：
- 即使加了
role="banner"，内部<h1>仍沿用全局标题层级，不会重置为该区域的 “1” -
:scope > h2在自定义标签上无效，因为:scope不绑定到非标准标签 - 搜索引擎只提取文本，不赋予结构权重，
<my-header>的 SEO 效果 ≈<div>
真正要语义化，就用标准标签：<header>、<nav>、<main> ——不是为了“看起来高级”，而是为了让机器（爬虫、阅读器、CSS 引擎）能准确理解你的意图。
