main标签唯一标识当前URL的业务主体内容，确认标准是“是否随URL变化且不可复用”；必须全局唯一、直接嵌套于body下，禁止重复或错误嵌套。
main 标签不是用来“框出视觉中心”的，而是告诉屏幕阅读器、搜索引擎和 Lighthouse：“这块内容，就是当前 URL 所代表的唯一业务逻辑主体”。用错位置或重复出现，会导致跳转失效、SEO 摘要错乱、无障碍检测直接报 duplicate-main 错误。
怎么确认某块内容真该进 main
只看一个标准：**它是否随 URL 变化、不可复用？**
- ✅ 博客页的
<article>、商品页的<section class="product-detail">、搜索页的<ol class="search-results">——换到别的页面就失去上下文，必须进main - ❌ 全局导航栏、页脚版权、侧边“猜你喜欢”、面包屑
<nav aria-label="Breadcrumb">——复制粘贴到任意页面都能用，必须踢出去 - ⚠️ 首页的“热门推荐”区块：如果它渲染的是当前路由主题下的动态内容（如 /news → 科技新闻，/events → 本地活动），可放；如果只是静态运营位，就该用
<section>+role="region"
SPA 路由中 main 的位置不能靠组件自己写
React/Vue 项目里最常翻车：每个 Page.tsx 都写 <main>{children}</main>，结果 hydration 后 DOM 里堆了三四个 main。
- ✅ 正确做法：只在根 Layout 组件（如
app/layout.tsx）中定义一次<main><Outlet /></main>或<main><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，确认只匹配一个开始标签，且其父节点是<body>（或 SSR 中的根容器）
最容易被忽略的一点：main 不是样式容器，也不带默认布局行为。它的全部价值只存在于语义层级——一旦嵌套错、重复写、塞进通用模块，机器就无法区分“主舞台”和“背景板”，而这个区分，用户看不见，但读屏器和搜索引擎全依赖它。
