<main>标签是页面唯一主内容语义锚点，必须且只能出现一次，用于让屏幕阅读器等辅助技术通过地标导航直达核心内容，缺失或多余均会导致跳转失效或行为不可预测。
main 标签是跳转逻辑的语义锚点
屏幕阅读器（如 NVDA、VoiceOver）和部分浏览器内置快捷键（比如按 M 键）会主动查找 <main> 元素，并把它当作用户想快速抵达的“主内容起点”。
这个行为不依赖 JavaScript，也不靠 CSS 定位，只认语义：只要存在且合法的 <main>，辅助技术就自动识别它为跳转目标。
- 页面有
<main>→ 屏幕阅读器能响应“跳至主内容”指令，直接聚焦到该区域起始位置 - 页面没有
<main>→ 即使写了“跳转到主要内容”链接，辅助工具也无法确认目标在哪，链接形同虚设 - 页面有多个
<main>→ 读屏器可能忽略全部、随机选一个，或反复播报“主内容开始”，用户无法预期结果
“跳转链接”本身只是触发器，
常见的写法是：
<a href="#main-content">跳转到主要内容</a> <!-- ...其他结构... --> <main id="main-content">...</main>
但重点不在 id 或 href 的匹配。即使去掉 id 和链接，只要 <main> 存在且唯一，现代读屏器仍能通过地标（landmark）导航直达它。
那个链接本质是给尚未支持地标导航的旧工具或手动操作用户准备的降级方案，而 <main> 是让它真正落地的基础设施。
为什么不能靠 JS 模拟这个功能
你可以用 JavaScript 监听点击、滚动、聚焦，把焦点移到某块区域，但这无法被读屏器识别为“主内容地标”。
WCAG 2.1 明确要求“每页仅一个主地标（main landmark）”，这是语义规范，不是行为模拟。只有 <main> 能满足这项合规要求。
实际开发中容易断开的链路
- SPA 路由切换时，每个页面组件各自渲染
<main>，导致 DOM 中残留多个实例 - 把
<main>套在<header>或<nav>里，语义被污染，辅助工具直接跳过 - 服务端模板未区分页面类型，列表页和详情页共用同一段
<main>包裹逻辑，造成嵌套或重复
确保跳转逻辑生效，关键不是加链接，而是让 <main> 正确、唯一、独立地存在于 <body> 下，且只包裹当前页面真正独有的核心内容。
