必须唯一且为直接子元素，不得嵌套于等语义标签内，否则破坏可访问性、seo及自动化测试；浏览器虽容错渲染，但语义断层会立即暴露。
HTML嵌套不是“能渲染出来就行”，浏览器容错强，但语义断层会在SEO、读屏器、自动化测试里立刻暴露。
为什么
浏览器解析时会强制校验结构。 和 是 的**强制直系子标签**，中间插任何东西（哪怕一个空格、注释或 <p></p>）都会触发静默修正：
- Chrome/Firefox 把非法内容移到
开头，并在开发者工具中显示为匿名文本节点 -
<title></title>若不在内，页面标题栏不生效，SEO 工具抓不到 -
<meta charset="UTF-8">若被挤进，中文大概率乱码
<main></main> 为什么不能嵌套在 <section></section> 或 <header></header> 里
<main></main> 表示整页唯一、可独立分发的核心内容区，W3C 明确禁止它被 <header></header>、<footer></footer>、<nav></nav>、<section></section> 等语义边界标签包裹：
- 错误写法：
<section><main></main></section>—— 浏览器不报错，但<main></main>的“唯一性”语义失效 - 屏幕阅读器可能跳过
<main></main>的快捷导航键（如 JAWS 的 M 键） - 它内部可以放多个
<section></section>，但反过来绝对不行 - 整个文档中
<main></main>只能出现一次，且不能是<article></article>的子元素
<p></p> 的合法父元素和常见误嵌套
<p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" 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 rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a>
<p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 是流式内容元素，设计初衷就是承载正文段落。它的合法父元素包括 、<article></article>、<section></section>、<footer></footer> 等块级容器，但绝不能是 、<title></title>、<script></script> 或 <style></style>：
- 若误写在
中，浏览器会自动把它移出并插入开头 -
<p></p>内部不能再嵌套<div>、<code><h1></h1>、<p></p>—— HTML5 虽部分允许，但多数验证器报错，CSS 重置也常因此失效 -
<p></p>是双标签，必须闭合；自闭合写法如<p></p>无效 - 如果它确实代表“卡片主体”“侧边工具栏”“文章摘要区”，优先查 W3C 推荐标签：
<article></article>、<aside></aside>、<section></section>都比<div class="card-body"> 更准确 <li>特别注意 <code><img>、<input>、<svg></svg>这类标签——它们永远是某容器的子级，不可能出现在顶层；看到它们“孤零零”在下，说明父容器漏写了
嵌套层级超过三层时，该删 <div> 还是换语义标签
<p>嵌套深 ≠ 结构复杂，关键看每一层是否承担明确语义角色。当缩进超过三层，先问：这层 <code><div> 是纯为样式/JS 选中服务，还是真有内容含义？
<ul>
<li>如果只为加 class 或 id 控制样式，且无语义价值，直接删掉或用更轻量的包装（比如用 <code><span></span> 或 CSS Grid 容器替代）
最容易被忽略的是：嵌套合法性 ≠ 渲染正常。很多结构浏览器能“容错渲染”，但一接入自动化测试、读屏器或 SEO 工具，语义断层立刻暴露。写完检查一遍 <main></main>、<nav></nav>、<header></header> 是否被误包、误复用，比调样式花的时间少，却决定页面能不能被真正“读懂”。
