页面里只能有一个 <main> 标签，这是 HTML5 规范强制要求；检查方法是用开发者工具搜索 <main>，结果必须严格匹配且仅有一对；<main> 不得嵌套在 <header>、<footer> 或 <nav> 内，其内容须为当前 URL 下独有、不可复用的主体内容。
<main></main> 标签必须且只能出现一次，这是 HTML5 规范强制要求，不是建议。多一个或嵌套在 <header></header> 里，屏幕阅读器可能跳过正文、Lighthouse 直接报错、SEO 摘要错乱。
页面里能有几个 <main></main>？检查方法是什么
只能有一个。浏览器不报错，但辅助技术和检测工具会失效。
- 打开开发者工具（F12），在 Elements 面板按
Ctrl+F（Windows）或Cmd+F（macOS），搜索<main></main>—— 结果必须严格匹配且仅有一对<main></main>和 - SPA 场景下特别容易翻车：React/Vue 的每个路由组件（如
Home.tsx、About.tsx）都写了<main></main>，实际应只由最外层页面入口（如 Next.js 的app/page.tsx或 React Router 的根<outlet></outlet>容器）包裹一次 - 服务端模板（EJS/Twig）中，列表页和详情页共用同一段包裹逻辑，可能生成两个
<main></main>—— 需加条件判断，比如只在非 layout 模板中输出
<main></main> 能不能嵌套在 <header></header> 或 <footer></footer> 里
不能。HTML5 规范明令禁止 <main></main> 成为 <header></header>、<footer></footer>、<nav></nav> 的后代元素。
- 错误写法：
<header><main>...</main></header>—— 屏幕阅读器大概率跳过该<main></main>，因为它被判定为“导航上下文中的内容” - 正确结构必须是平级并列：
<header></header><main></main><footer></footer>，三者都直接作为的子元素（或至少是语义中立的<div> 的直接子元素） <li> <code><main></main>内部可以包含<header></header>，但仅限本页专属标题（如文章<h1></h1>和发布时间），不能塞网站 Logo + 全局导航 - ✅ 应放：
<h1></h1>（页面级标题）、商品详情、搜索结果列表、独立表单（如注册流程）、用户仪表盘核心数据区 - ❌ 禁止放：
<nav></nav>（全局导航）、<footer></footer>（版权信息）、<aside></aside>（侧边推荐）、网站 Logo、全局搜索框、面包屑导航 - ⚠️ 容易混淆：产品页里的“客服入口”按钮——它服务主题但不构成主题本身，应放在
<section></section>或<footer></footer>，而非<main></main>
<main></main> 里该放什么、不该放什么
判断标准只有一个：这块内容是否“随 URL 变化、不可复用”。复制粘贴到另一个页面还能原样用？那它就不属于 <main></main>。
立即学习“前端免费学习笔记（深入）”；
真正难的不是写对第一个 <main></main>，而是确保它在 SPA 路由切换、SSR hydration、异常状态（如 404）下依然唯一存在——动态替换内容，而不是动态创建/销毁标签本身。
