不能嵌套在内，因其是页面唯一主内容容器，w3c明确禁止被等语义标签包裹；错误写法破坏语义，导致屏幕阅读器跳过导航、seo降权。

为什么

不能套在

里

浏览器不会报错，但语义直接失效。<main></main> 是全页唯一主内容声明，W3C 明确禁止它被 <section></section>、<header></header>、<nav></nav> 等任何语义容器包裹。错误写法如 <section><main></main></section> 会导致屏幕阅读器跳过 <main></main> 的快捷导航，SEO 工具也可能降权该区块。

正确做法是：主内容就用 <main></main> 直接包裹，内部再用 <section></section> 划分小节；如果某块内容本身是可独立分发的（比如一篇博客正文），优先用 <article></article>，而不是硬塞进 <section></section> 里再包一层 <main></main>。

嵌套超过三层时，

还是语义标签

层级扁平化不是靠删 <div>，而是看每一层是否承担明确语义角色。当 DOM 深度 ≥ 4，先问：有没有更贴切的原生标签？ <ul> <li>错误模式：<code><div class="card"><div class="card-body"><p>...</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a> <p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p> </div> <a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></div></div> → 中间层无语义，纯为样式服务，应删或换

推荐替换：<article><p>...</p></article> 或直接 <p>...</p>，视内容意图而定

若真需容器（如“侧边工具栏”），查 W3C 推荐标签，优先 <aside></aside>、<nav></nav>、<footer></footer>，而非硬套 <div> <p>最容易被忽略的是：嵌套合法性 ≠ 渲染正常。很多结构浏览器能容错渲染，但一接入自动化测试、读屏器或 SEO 工具，语义断层立刻暴露。</p> <h3>嵌套列表序号中断的修复逻辑</h3> <p><code><ol></ol> 子列表编号重置为 1，根本原因是子 <ol></ol> 没被包在父级 <li> 内部，而是并列放在同一父容器下。浏览器将其识别为新列表，而非延续。

正确嵌套必须满足：子 <ol></ol> 或 <ul></ul> 是父 <li> 的**直接子节点**。验证方式很简单：打开开发者工具，检查 DOM 树中子列表是否挂在 <li> 下，而不是 <ol></ol> 同级。

常见错误写法：<ol> <li>A</li> <ol><li>1</li></ol> </ol>（子 <ol></ol> 在 <ol></ol> 下，非 <li> 下）

正确写法：<ol><li>A<ol><li>1</li></ol> </li></ol>

HTML 编辑器里安全重构嵌套结构的关键动作

编辑器不是万能的，但配合以下动作能大幅降低误操作风险：

• 用编辑器「符号重命名」功能批量更新类名，但务必同步检查 CSS 文件和 JS 中的 querySelector 选择器，否则样式/交互会断
• 内联脚本（如 onclick="doSomething()"）必须提取到外部 JS，并用 id 或 data-* 属性绑定，避免重命名时漏掉字符串字面量
• 公共结构（如页头、导航）不要复制粘贴，用构建工具动态引入，或至少加注释标明「此段落由 header.fragment 统一维护」
• 每次删减嵌套层前，在浏览器里右键「检查元素」，确认删掉的那层确实没被 JS 通过 parentNode 或 children[1] 强依赖

最常被跳过的一步：改完 HTML 后，不验证辅助技术行为。哪怕只是用 Chrome 扩展「axe DevTools」跑一次，就能发现 <main></main> 是否被误包、<li> 是否为空、<nav></nav> 是否缺失语义角色——这些点不靠人眼缩进对齐，得靠工具实锤。