浏览器不报错但读屏器乱跳，因为<main>是语义标签而非语法强制项，HTML解析器不校验唯一性或嵌套合法性，而读屏器仅识别首个<main>作为landmark，重复或错误嵌套（如在<header>内）会导致跳转失败或冲突播报。
为什么浏览器不报错但读屏器会乱跳
因为 <main> 是语义标签，不是语法强制项。HTML 解析器只检查标签是否闭合、嵌套是否合法，不验证“是否唯一”或“是否嵌套在 <header> 里”。但屏幕阅读器（如 NVDA、VoiceOver）依赖 DOM 中的 landmark 角色（role="main"）做快捷跳转——它只认第一个 <main>，后面所有都被忽略或触发冲突播报。
- 实操验证：打开页面，按
M键（VoiceOver）或D键（NVDA），观察是否跳转到预期位置；若卡在导航或反复提示“主内容开始”，大概率是重复或位置错误 - Lighthouse 的 “Document has a main landmark” 审计项会直接扣分，但 DevTools Elements 面板不会高亮警告，必须手动
Ctrl+F搜<main> - SPA 场景下特别容易漏检：路由切换后旧
<main>未卸载，新组件又挂载一个，需滚动到底部再搜一次
React/Vue 里该放在哪一层
放在最外层路由出口容器里，而不是每个页面组件内部。否则 hydration 后 DOM 里会残留多个 <main> 实例。
- React Router v6：在根 Layout 组件中写
<main><Outlet /></main>，所有页面组件只负责渲染子内容，不带<main> - Vue Router：同理，
<main><RouterView /></main>放在 App.vue 或 Layout.vue，子页面组件（如 Home.vue）只写<h1>首页</h1><p>... - Next.js 注意：
app/layout.tsx是全局壳层，不能放<main>；必须放到app/page.tsx或动态路由的page.tsx内部 - 错误写法：
ArticlePage.tsx里写<main>{...}</main>，ProfilePage.tsx也这么写 → 多个<main>并存
main 能不能嵌套在 header 里
不能。HTML5 规范明文禁止 <main> 作为 <header>、<footer>、<nav> 的后代元素，这是语义冲突，不是兼容性问题。
- 错误结构：
<header><main>...</main></header>→ Lighthouse 报错The element main must not appear as a descendant of the header element，读屏器大概率跳过该<main> - 正确结构：所有语义区块必须平级并列于
<body>下，例如<body><header></header><main></main><footer></footer></body></li> <li>例外允许：<code><header>
可以作为<main>的**直接子元素**，但仅限当前页面专属元信息（如文章标题 + 发布时间），不是网站全局头部 - 如果需要弹窗、卡片等局部“主内容”，用
<section role="region" aria-labelledby="id">替代，别硬塞<main>
什么内容该放进，什么不该
判断标准只有一个：这块内容复制粘贴到另一个页面还能原样用吗？能，就不属于 <main>。
立即学习“前端免费学习笔记（深入）”；
- ✅ 应包含：文章正文、商品详情、搜索结果列表、独立表单（如注册页）、用户仪表盘核心数据区 —— 这些随 URL 变化、不可复用
- ❌ 不应包含：
<nav>（全局导航）、<footer>（版权）、<aside>（侧边推荐）、<header>（Logo + 主导航）—— 这些跨页面复用，属于布局而非主题 - ⚠️ 容易混淆：客服入口按钮、分享组件、面包屑导航 —— 它们服务主题，但不构成主题本身，应放在
<section>或<div>里，而非<main> - SSR 场景下注意：服务端渲染出的
<main>结构必须和客户端 hydration 后一致，否则 React/Vue 可能丢弃语义角色，导致读屏器失效
<main> 不是视觉容器，也不提供默认样式 —— 它存在的唯一意义是告诉机器“这里才是本页真正要说的事”。一旦把它当 div 用，或者靠 CSS 定位去“撑出主体区域”，语义就彻底失效了。 
