浏览器不报错但读屏器乱跳，因为是语义标签而非语法强制项，html解析器不校验唯一性或嵌套合法性，而读屏器仅识别首个作为landmark，重复或错误嵌套（如在内）会导致跳转失败或冲突播报。

为什么浏览器不报错但读屏器会乱跳

因为 <main></main> 是语义标签，不是语法强制项。HTML 解析器只检查标签是否闭合、嵌套是否合法，不验证“是否唯一”或“是否嵌套在 <header></header> 里”。但屏幕阅读器（如 NVDA、VoiceOver）依赖 DOM 中的 landmark 角色（role="main"）做快捷跳转——它只认第一个 <main></main>，后面所有都被忽略或触发冲突播报。

• 实操验证：打开页面，按 M 键（VoiceOver）或 D 键（NVDA），观察是否跳转到预期位置；若卡在导航或反复提示“主内容开始”，大概率是重复或位置错误
• Lighthouse 的 “Document has a main landmark” 审计项会直接扣分，但 DevTools Elements 面板不会高亮警告，必须手动 Ctrl+F 搜 <main></main>
• SPA 场景下特别容易漏检：路由切换后旧 <main></main> 未卸载，新组件又挂载一个，需滚动到底部再搜一次

React/Vue 里

该放在哪一层

放在最外层路由出口容器里，而不是每个页面组件内部。否则 hydration 后 DOM 里会残留多个 <main></main> 实例。

• React Router v6：在根 Layout 组件中写 <main><outlet></outlet></main>，所有页面组件只负责渲染子内容，不带 <main></main>
• Vue Router：同理，<main><routerview></routerview></main> 放在 App.vue 或 Layout.vue，子页面组件（如 Home.vue）只写 <h1>首页</h1> <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>
• Next.js 注意：app/layout.tsx 是全局壳层，不能放 <main></main>；必须放到 app/page.tsx 或动态路由的 page.tsx 内部
• 错误写法：ArticlePage.tsx 里写 <main>{...}</main>，ProfilePage.tsx 也这么写 → 多个 <main></main> 并存

main 能不能嵌套在 header 里

不能。HTML5 规范明文禁止 <main></main> 作为 <header></header>、<footer></footer>、<nav></nav> 的后代元素，这是语义冲突，不是兼容性问题。

• 错误结构：<header><main>...</main></header> → Lighthouse 报错 The element main must not appear as a descendant of the header element，读屏器大概率跳过该 <main></main>
• 正确结构：所有语义区块必须平级并列于 下，例如

  <header></header><main></main><footer></footer>

• 例外允许：<header> 可以作为 <code><main></main> 的**直接子元素**，但仅限当前页面专属元信息（如文章标题 + 发布时间），不是网站全局头部
• 如果需要弹窗、卡片等局部“主内容”，用 <section role="region" aria-labelledby="id"></section> 替代，别硬塞 <main></main>

什么内容该放进

，什么不该

判断标准只有一个：这块内容复制粘贴到另一个页面还能原样用吗？能，就不属于 <main></main>。

• ✅ 应包含：文章正文、商品详情、搜索结果列表、独立表单（如注册页）、用户仪表盘核心数据区 —— 这些随 URL 变化、不可复用
• ❌ 不应包含：<nav></nav>（全局导航）、<footer></footer>（版权）、<aside></aside>（侧边推荐）、<header></header>（Logo + 主导航）—— 这些跨页面复用，属于布局而非主题
• ⚠️ 容易混淆：客服入口按钮、分享组件、面包屑导航 —— 它们服务主题，但不构成主题本身，应放在 <section></section> 或 <div> 里，而非 <code><main></main>
• SSR 场景下注意：服务端渲染出的 <main></main> 结构必须和客户端 hydration 后一致，否则 React/Vue 可能丢弃语义角色，导致读屏器失效
实际项目中最容易被忽略的点是：<main></main> 不是视觉容器，也不提供默认样式 —— 它存在的唯一意义是告诉机器“这里才是本页真正要说的事”。一旦把它当 div 用，或者靠 CSS 定位去“撑出主体区域”，语义就彻底失效了。