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 artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" 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> 嵌套三层以上，都是典型高危结构。