<main> 是必须使用的语义化标签，不可省略或重复，它确保辅助技术准确定位主内容、提升SEO与无障碍评分；应包裹核心任务内容，避免嵌套于其他结构元素中，优先使用原生标签而非ARIA。
HTML 没有 <main> 标签的“主内容”语义优势，是因为它根本就不是可选的——它是必须用的，而且浏览器、屏幕阅读器和 SEO 系统都依赖它做真实判断。
为什么 <main> 不是“锦上添花”，而是基础结构要求
很多开发者以为加不加 <main> 只影响代码整洁度，其实它直接决定辅助技术能否准确定位页面核心内容。一个页面只能有一个 <main>，且不能嵌套在 <article>、<aside>、<footer>、<header> 或 <nav> 里——否则会被屏幕阅读器忽略或报错。
- 若省略
<main>，NVDA、VoiceOver 等工具会退回到靠<h1>或 ARIArole="main"推断，准确率大幅下降 - Google 的结构化数据测试工具会警告“缺少主内容区域”，影响富摘要展示
- 多个
<main>会导致 Lighthouse 的“无障碍”评分直接扣分（错误类型：Document has more than one main element）
<main> 和 ARIA role="main" 到底该用哪个
优先用原生 <main> 标签。ARIA role="main" 是为老版本 HTML 或无法修改 DOM 结构的场景兜底用的，不是替代方案。
-
<main>自带隐式role="main"，无需额外声明 - 如果已用
<main>，再加role="main"属于冗余，部分旧版 JAWS 会重复播报 - 只有在 IE8–IE11 且无法升级 HTML 版本时，才考虑用
<div role="main">+ polyfill，但现代项目基本不用
哪些地方绝对不能放 <main>
<main> 必须包裹真正对用户任务最关键的内容，比如文章正文、产品列表、表单主体。它不是“除了 header/nav 之外剩下的所有东西”的容器。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 不能包含站点 logo、主导航、页脚链接、侧边广告栏——这些属于外围结构，应放在
<header>、<nav>、<aside>或<footer>中 - 不能包裹整个
<body>，否则会把导航、页脚也纳入“主内容”，破坏语义边界 - SPA 中动态切换路由时，需确保每次只渲染一个
<main>；React/Vue 里常见错误是多个组件同时 render 出<main>，导致重复
怎么快速验证 <main> 用得对不对
别只靠肉眼检查。用浏览器原生能力+轻量工具交叉验证：
- 在 Chrome DevTools 的 Accessibility 面板中，展开“Landmarks”，确认只出现一个
Main，且其 DOM 路径合理 - 运行命令行工具
axe-core：npx axe <code>index.html，关注region类规则是否报错 - 手动开启 VoiceOver（Mac）或 NVDA（Win），按
D键跳转到主内容区，看是否精准落到正文起始位置
最常被忽略的一点：服务端渲染（SSR）或静态生成（如 Next.js、Gatsby）中，<main> 往往被框架模板自动注入，但开发者可能在子组件里又加了一个——结果两个 <main> 并存，而这个错误在开发环境完全不可见，只在 Lighthouse 或辅助工具里暴露。
