HTML嵌套关乎语义解析而非缩进美观：header、main、footer等必须为body直接子元素；ol/ul子元素仅限li；aside/section可复用但语义降级；article嵌套需满足“三可”原则；超三层嵌套应换语义标签或扁平化。
HTML 文档层级嵌套不是“怎么缩进好看”的问题，而是“浏览器和辅助工具怎么理解你写的结构”的问题——写错嵌套，页面可能照常显示，但读屏器会跳过 <main></main>，SEO 工具会降权内容，自动化测试会报 DOM 结构异常。
哪些标签必须直接放在
W3C 明确规定 <main></main>、<header></header>、<nav></nav>、<footer></footer> 应为 的直接子元素（即首层缩进），否则语义失效。常见误写：
-
<article><main>...</main></article>→<main></main>被包裹，失去“页面唯一主内容”含义 -
<div class="wrapper"><header>...</header></div>→<header></header>成为<div> 子级，屏幕阅读器可能忽略其全局头部语义 <p>例外：<code><header></header>和<footer></footer>可在<article></article>或<section></section>内部复用，但此时它代表该区块自身的头/尾，而非整页。<ol></ol>和<ul></ul>里只能放<li>浏览器对列表的解析极其严格：
<ol></ol>和<ul></ul>的合法子元素只有<li>。任何其他标签（包括<p></p>、<div>、<code><span></span>，甚至换行符）未包裹在<li>中时，都会触发自动修正：立即学习“前端免费学习笔记（深入）”；
- 错误：
<ol> <p>第一项</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill8714" title="HTML汇报生成器"><img src="https://img.php.cn/upload/skill/000/000/081/179220974213190.jpg" alt="HTML汇报生成器" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill8714" title="HTML汇报生成器">HTML汇报生成器</a> <p>🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。</p> </div> <a href="/xiazai/skill8714" title="HTML汇报生成器" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <li>第二项</li> </ol>→ 浏览器实际拆成两个独立<ol></ol>，序号重置 - 正确：
<ol> <li><p>第一项</p></li> <li>第二项</li> </ol> -
<li>是唯一允许嵌套块级元素的行内级容器，内部可安全放<p></p>、<div>、<code><ul></ul>等<article></article>嵌套必须满足“三可”原则嵌套
<article></article>合法，但不等于推荐。它只应在子内容本身具备“可独立分发、可独立复用、可独立索引”时使用：- 合规场景：
<article></article>（博客正文）内完整嵌入另一篇带标题、作者、时间戳的旧文（即另一个<article></article>） - 不合规场景：评论区每条回复都套
<article></article>→ 大多数回复无独立 URL、无法被 RSS 抓取、脱离上下文即语义断裂 - 二级回复一律禁用
<article></article>；应使用<section></section>或<li>，仅当某条回复本身已是完整长评且业务支持单独分享时，才升格为子<article></article>
嵌套超过三层时，优先换语义标签，而非堆
<div> <p>视觉上需要多层包裹，不等于 DOM 层级必须深。深层 <code><div> 堆叠是信号灯：说明语义缺失。 <ul> <li>反例：<code><div class="card"><div class="card-body"><div class="card-content"><p>...</p></div></div></div> - 合规场景：
- 正解：用
<article></article>、<section></section>、<header></header>等替代中间层，或直接扁平化 —— 若某层<div> 仅用于 CSS 选中或 JS 操作，且无内容角色，就该删掉 <li>关键判断：打开 DevTools 查看 DOM 结构，问自己——这一层标签是否承载了可被读屏器识别、被搜索引擎归类、被自动化测试断言的语义价值？没有，就别留</li> <p>最容易被忽略的是：浏览器容错渲染掩盖了结构缺陷。等接入 CI 自动校验、无障碍审计或 SEO 工具时，那些“看起来没问题”的嵌套才会真正暴露问题——<code><main></main>被包在<section></section>里、<ol></ol>里混着<p></p>、<article></article>嵌套三层以上，都是典型高危结构。
- 错误：
