main必须是body的直接子元素，因其作为屏幕阅读器定位主内容的唯一锚点，若被任何其他标签包裹则导航失效；SEO也仅信任其直接子内容为正文权重区。

为什么

必须是的直接子元素

屏幕阅读器靠 DOM 位置识别主内容锚点，<main><https:>被任何<code><div><https:>或<code><section><https:>包裹，就会失效。用户按<code>Insert+M<https:>（NVDA）或<code>Ctrl+Option+J<https:>（VoiceOver）跳转时直接失败，只能手动下移14次以上才能触达正文。<https:><p>检查方法很简单：打开控制台运行<code>document.querySelector('main').parentElement === document.body<https:>，返回<code>true<https:>才算合格。<https:><ul><li>常见错误：<code><div class="layout"><main><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712main><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712div><https:> —— 必须拆掉外层容器<https:><li>SSRhttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712CSR 框架中容易忽略：Reacthttps://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712Vue 的根布局组件若渲染了 wrapper div，<code><main><https:>就得提到最外层 App 组件里<https:><li>SEO 也受影响：爬虫只信任首个 <code><main><https:> 的子内容为正文权重区，嵌套后这部分内容可能被降权<https:><https:><h3>标题层级断裂会让屏幕阅读器“读不出上下文”<https:><p>辅助技术依赖<code><h1><https:>–<code><h6><https:>构建大纲树，不是为了好看，而是为了导航。跳级（如<code><h2><https:>后直接<code><h4><https:>）或倒置（<code><h3><https:>出现在<code><h2><https:>之前）会让 Chrome DevTools 的 Accessibility 面板标红，用户按<code>H<https:>键跳转时听到的是一串无序的“标题二级”“标题四级”，完全无法定位。<https:><ul><li><code><h1><https:>必须全局唯一，且是第一个有意义的主内容标题 —— 不要让 CMS 输出两个<code><h1><https:>，也不要把它塞进<code><header><https:>当 logo 文字<https:><li>富文本编辑器常把小标题渲染成<code><p class="title-h3"><https:>，必须前端拦截并替换为真<code><h3><https:><https:><li>旧版 JAWS 对<code><h5><https:>https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712<code><h6><https:>支持不稳定，实际使用建议不超过<code><h4><https:>；深层结构用<code><section><https:>+<code><h3><https:>分隔更稳妥<https:><https:><h3><section>和<article>到底怎么选<https:><p>判断依据不是视觉样式，而是内容是否具备「可移植性」：能脱离当前页面独立存在、被 RSS 订阅或单独引用的，才用<code><article><https:>；否则一律用<code><section><https:>。<https:><ul><li><code><article><https:>典型场景：博客正文、新闻稿、用户评论、论坛帖子 —— 它们自带隐式<code><h1><https:>语义，可独立分发<https:><li><code><section><https:>适合逻辑相关但不可独立存在的模块：比如“关于我们”下的“团队介绍”“发展历程”，它们必须依附于父页面才有意义<https:><li>轮播图容器、页脚友情链接、侧边栏广告位硬套<code><section><https:>是错的 —— 它们既无标题，也不构成完整信息单元<https:><li>过度嵌套<code><section><https:>（三层以上）会让 heading 导航列表冗长，建议配合<code><h2><https:>–<code><h4><https:>控制粒度<https:><https:><h3>导航区<code><nav><https:>为什么必须含可聚焦元素<https:><p><code><nav><https:>不是装饰性容器，它是 landmark 区域。如果里面只有纯文本链接（如<code>首页 | 关于 | 联系<https:>），屏幕阅读器会把它当普通段落朗读，不触发<code>D<https:>键跳转，也无法用方向键遍历。<https:><ul><li>每个<code><nav><https:>至少包含一个<code><a><https:>或<code><button><https:>；纯按钮或单个链接别硬套<code><nav><https:><https:><li>推荐结构：<code><nav aria-label="主导航"><ul><li><a href="https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712">首页<https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712a><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712li><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712ul><https://www.php.cn/link/29a9f8c8460e5e2be4edde557fd83712nav><https:><https:><li>避免把“猜你喜欢”列表、广告位链接塞进<code><nav><https:> —— 用户按<code>N<https:>键会误入非导航区<https:><https:><p>最难的不是写对标签，而是在 CMS 富文本、组件嵌套、多层 SSR 模板拼接时，始终让每个结构节点都能回答：“我为什么是这一级？我的父级在哪？我的兄弟是否逻辑一致？”<https:></https:></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill5806" title="html-deploy">html-deploy</a> <p>使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></https:></https:></https:>