main标签唯一标识当前url的业务主体内容，确认标准是“是否随url变化且不可复用”；必须全局唯一、直接嵌套于body下，禁止重复或错误嵌套。

main 标签不是用来“框出视觉中心”的，而是告诉屏幕阅读器、搜索引擎和 Lighthouse：“这块内容，就是当前 URL 所代表的唯一业务逻辑主体”。用错位置或重复出现，会导致跳转失效、SEO 摘要错乱、无障碍检测直接报 duplicate-main 错误。

怎么确认某块内容真该进 main

只看一个标准：**它是否随 URL 变化、不可复用？**

• ✅ 博客页的 <article></article>、商品页的 <section class="product-detail"></section>、搜索页的 <ol class="search-results"></ol>——换到别的页面就失去上下文，必须进 main
• ❌ 全局导航栏、页脚版权、侧边“猜你喜欢”、面包屑 <nav aria-label="Breadcrumb"></nav>——复制粘贴到任意页面都能用，必须踢出去
• ⚠️ 首页的“热门推荐”区块：如果它渲染的是当前路由主题下的动态内容（如 /news → 科技新闻，/events → 本地活动），可放；如果只是静态运营位，就该用 <section></section> + role="region"

SPA 路由中 main 的位置不能靠组件自己写

React/Vue 项目里最常翻车：每个 Page.tsx 都写 <main>{children}</main>，结果 hydration 后 DOM 里堆了三四个 main。

• ✅ 正确做法：只在根 Layout 组件（如 app/layout.tsx）中定义一次 <main><outlet></outlet></main> 或 <main><routerview></routerview></main>，子页面只负责提供内容
• ❌ 错误写法：ArticlePage.tsx 里有 <main>...</main>，ProfilePage.tsx 里也有 —— Lighthouse 会标红 duplicate-main
• ⚠️ Next.js 特别注意：app/layout.tsx 是全局壳层，main 必须下放到 app/page.tsx 或动态路由的 page.tsx 内部，否则所有页面共享同一个 main 实例

嵌套结构错误比缺失更危险

浏览器不报错，但辅助技术可能完全忽略整个 main 区域。

• ❌ 绝对禁止：<header><main>...</main></header>、<footer><main>...</main></footer> —— main 不得作为 header、footer、nav、aside 的子元素
• ✅ 允许：<main><header><h1>文章标题</h1> <time>2026-05-25</time></header><p>正文...</p></main> —— 这里的 header 是“本页专属元信息”，不是网站全局头部
• ? 实操验证：打开 DevTools → Elements 面板 → Ctrl+F 搜索 <main>，确认只匹配一个开始标签，且其父节点是 <code>（或 SSR 中的根容器）

最容易被忽略的一点：main 不是样式容器，也不带默认布局行为。它的全部价值只存在于语义层级——一旦嵌套错、重复写、塞进通用模块，机器就无法区分“主舞台”和“背景板”，而这个区分，用户看不见，但读屏器和搜索引擎全依赖它。