必须且只能出现一次，是页面“当前视图核心内容”的唯一语义锚点，不可嵌套在header、nav、footer、aside内，也不可重复使用，否则破坏可访问性与seo。
<main></main> 必须且只能出现一次，它是页面“当前视图核心内容”的唯一语义锚点，不是视觉容器，也不提供默认样式——用错位置或重复使用，会直接破坏屏幕阅读器跳转逻辑和 SEO 权重分配。
为什么不能在 或
HTML5 规范明令禁止 <main></main> 成为 <header></header>、<footer></footer>、<nav></nav>、<aside></aside> 或 <article></article> 的后代。哪怕 DOM 结构上它“看起来在页眉下面”，只要嵌套层级不对，读屏软件（如 NVDA、VoiceOver）就可能完全忽略它。
- 错误写法：
<header><main>...</main></header>—— 主内容被跳过 - 正确结构：必须是兄弟级平铺，例如
<header></header><main></main><footer></footer> - SPA 中常见误用：把
<main></main>包在全局 Layout 组件内部，导致每个路由都继承同一个<main></main>，实际应由具体页面组件（如Home.tsx）自己包裹
<main></main> 里该放什么、不该放什么
判断标准只有一个：这块内容是否“随 URL 变化、不可复用”。复制粘贴到另一个页面还能原样用？那它就不属于 <main></main>。
- ✅ 允许：
<h1></h1>（页面级标题）、<p></p>、<ol></ol>（商品列表）、<form></form>（独立提交表单）、<section></section>（如“用户评价”子模块） - ❌ 禁止：
<nav></nav>（全局导航）、<footer></footer>（版权信息）、<aside></aside>（侧边推荐）、<header></header>（网站 Logo + 主导航） - ⚠️ 注意：
<header></header>作为<main></main>的直接子元素是允许的——但仅限“本篇文章自己的标题与发布时间”，不是整个站点头部
React/Vue/Next.js 项目中怎么放 <main></main>
框架不会自动校验语义结构，错误往往只在 Lighthouse 或 axe 检测时暴露为 duplicate-main 错误，而 DevTools 不报任何提示。
- Vue：在
<router-view></router-view>渲染的具体页面组件（如Article.vue）模板顶层用<main><h1>...</h1></main> - React：页面级组件（如
Dashboard.tsx）返回 JSX 的最外层用<main>...</main>，不要在App.tsx根组件统一包死 - Next.js App Router：全局共享内容可放
app/layout.tsx，但真正的页面主体必须落在app/page.tsx或app/[slug]/page.tsx内部 - SSR 场景下更要小心：服务端拼接模板时若多个 partial 都输出
<main></main>，会导致 HTML 中实际存在多个，搜索引擎会降权
最容易被忽略的一点是：<main></main> 不代表“最重要的部分”，而是“去掉所有复用区块后剩下的那块”。它不靠视觉居中、不靠 CSS 加粗来体现重要性，它的权重来自结构位置和语义唯一性——一旦嵌套错、重复写、或塞进通用组件，机器就无法识别主干了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
