<main> 标签是 HTML 语义化结构的一部分，用于标识页面唯一核心内容，不可嵌套于其他语义标签内，且每个页面仅允许一个；其作用面向辅助技术而非视觉渲染。
main 标签不是“添加”出来的，是语义化结构的一部分
HTML 中的 <main> 不是靠 JS 插入或 CSS 显示出来的“功能标签”，它本身不带样式、不触发行为，只告诉浏览器和辅助工具：“这部分是页面唯一的核心内容”。用错位置或滥用，反而会破坏可访问性。
- 每个页面最多只能有一个
<main>，且不能嵌套在<article>、<aside>、<footer>、<header>、<nav>内部 - 它不该包裹网站通用区域（比如全局导航、页脚版权），只包真正随路由 / 页面变化的主体内容
- 如果用了 SSR 或前端框架（如 React/Vue），
<main>应该落在组件渲染的主内容区，而不是整个<App>根节点外层
Chrome 控制台里看不到 main 的效果？正常
<main> 不影响视觉渲染，也不改变 DOM 行为。你在 DevTools 里选中它，不会看到额外边框、颜色或布局变化——这恰恰说明它用对了。它的作用对象是屏幕阅读器、搜索引擎爬虫和开发者工具中的“Accessibility”面板。
- 在 Chrome 的 Elements 面板右键
<main>→“Inspect Accessibility Properties”，能看到 role=”main” 自动被识别 - 用 NVDA 或 VoiceOver 浏览时，按
m键可直接跳转到<main>区域（前提是没被 aria-hidden 覆盖） - 如果手动加了
role="main"到别的标签上，反而可能和原生<main>冲突，导致重复跳转
React/Vue 项目里怎么放 main？别套在 router-outlet 外面
常见错误是把 <main> 放在整个应用最外层，结果每个页面都把它当“主内容”，连登录页、404 页也套进去——这违反了“唯一核心内容”的语义要求。
- Vue：在
<router-view>内部组件里包裹<main>，比如<Home.vue>的模板顶层是<main><h1> 首页 </h1>……</main> - React：在页面级组件（如
Dashboard.tsx）的返回 JSX 最外层用<main>，不要在App.tsx里统一包死 - Next.js：用
app/layout.tsx的<main>只适用于全局共享内容；真正的页面主体应放在app/page.tsx或app/[slug]/page.tsx内部
SEO 和 Lighthouse 为什么在意 main？
Google 爬虫会参考语义标签判断内容权重。<main> 区域内的文本、链接、标题层级，比 <aside> 或页脚里的同等内容更容易被视为主信息源。Lighthouse 的“Document has a main landmark”审计项失败，往往是因为：<main> 缺失、重复、或被 aria-hidden="true" 意外屏蔽。
立即学习 “ 前端免费学习笔记（深入）”；
- 检查方法：打开 Lighthouse →“Accessibility”报告 → 找“Document has a main landmark”条目，点“Learn more”看具体触发条件
- 修复优先级高于加 class 或写 CSS：没有
<main>，再好看的 UI 在可访问性评分里也会掉档 - 注意 SSR 渲染时服务端是否真输出了
<main>标签——有些框架默认不输出，需显式写在页面组件里
实际写的时候，最容易被忽略的是“唯一性”和“上下文匹配”：一个页面有多个动态区块（比如带 tabs 的仪表盘），<main> 应该包住当前激活 tab 的全部内容，而不是所有 tab 的容器。语义不是装饰，是描述真实结构。
