<p>、<h1>–<h6>、<dt>不能嵌套块级元素如<div><ul><section>；不可互相嵌套；<li>可嵌套任意流内容。浏览器会自动纠错非法嵌套，导致DOM结构与预期不符。
哪些HTML5标签不能互相嵌套？
最常踩坑的是把块级内容塞进文本级容器里——浏览器会自动“修复”，但结果往往和你写的不一样。比如 <p><div>内容</div></p>，浏览器实际解析为 <p></p><div>内容</div><p></p>，中间的 <p> 被拆开、闭合两次。这不是 bug，是 HTML5 规范强制纠错行为。
关键限制有三条：
-
<p>只能包含语句型内容（phrasing content），如<span>、<strong>、<a>、<img>，**不能含<div>、<ul>、<section>等任何块级或区块型元素** -
<h1>–<h6>和<dt>同样只允许语句型内容，嵌套<p>或<div>属于非法 -
<a>标签虽是内联元素，HTML5 允许它包裹块级内容（如<div>、<article>），但**多个<a>不能互相嵌套**，否则外层链接失效
为什么 <li> 里面能放 <div>？
因为 <li> 属于流元素（flow content），且没有“仅限语句型”的限制。它和 <div> 一样，是通用容器，设计上就支持嵌套任意合法子内容。
常见误解是觉得 <li> “太瘦小”，其实它的内容模型很宽松：
立即学习“前端免费学习笔记（深入）”；
- 可以包含多个段落：
<li><p>第一段</p><p>第二段</p></li> - 可以包裹完整卡片结构：
<li><div class="card"><h3>标题</h3><p>描述</p></div></li> - 但注意：不能把
<ul>或<ol>直接放在<li>外面——必须是<li>的子元素，才构成合法列表嵌套
浏览器怎么“悄悄修正”错误嵌套？
当遇到非法嵌套（比如 <p><section></section></p>），浏览器不会报错，而是按“解析算法”自动断开并重建 DOM 结构。这个过程叫 tree construction，不同引擎细节略有差异，但结果高度一致：
<p><section>内容</section></p>
→ 实际生成的 DOM 是：
<p></p> <section>内容</section> <p></p>
后果很实在：
- CSS 选择器
p section永远不匹配——因为<section>已不是<p>的后代 - JavaScript 查询
document.querySelector('p').children返回空集合 - 无障碍工具（如屏幕阅读器）可能跳过或误读结构，影响可访问性
怎么快速发现并修复嵌套问题？
靠肉眼检查缩进远远不够。真实项目里，嵌套错误往往藏在模板片段、CMS 输出或框架动态渲染中。
推荐三步验证法：
- 用 W3C HTML Validator 提交 HTML，它会明确标出 “Element X not allowed as child of element Y” 类错误
- 在 Chrome / Firefox 开发者工具的 Elements 面板 中右键 → “Edit as HTML”，粘贴代码，浏览器会实时显示它“理解”成什么样
- 对关键组件（如导航菜单、文章卡片），写简单测试脚本检查父子关系：
console.assert( document.querySelector('nav ul').parentElement.tagName === 'NAV', 'ul 不在 nav 内！' );
真正容易被忽略的，是那些“看起来能跑通”的嵌套——比如用 <span> 包裹整段图文。它不报错，但语义全错，SEO 和可访问性双双受损。嵌套规则不是为了刁难人，而是为了让机器（和人）都能准确读懂你的结构意图。
