标签在html文档中必须且只能出现一次，用于包裹页面独一无二的主要内容，不可嵌套在、等已有语义的元素内，也不应与role="main"重复使用。
main 标签必须且只能出现一次
一个 HTML 文档里，<main></main> 元素应当有且仅有一个，用来包裹页面中与当前文档直接相关、独一无二的主要内容。它不能出现在 <article></article>、<aside></aside>、<footer></footer>、<header></header> 或 <nav></nav> 内部——这些区域本身已有语义，再套 <main></main> 会破坏结构逻辑。
常见错误包括：
- 在多个
<article></article>中各自加<main></main> - 把全站导航或页脚也包进
<main></main> - 遗漏
<main></main>，只用<div id="main"> 代替（失去语义和辅助技术支持）<h3>main 不能作为子元素嵌套在 article 或 section 里</h3> <p><code><main></main>是顶层内容容器，代表整个页面的主体流。而<article></article>表示可独立分发的内容单元（比如一篇博客、一条新闻），<section></section>表示主题性分组。它们之间是并列关系，不是包含关系。正确结构示例：
立即学习“前端免费学习笔记（深入）”；
<body> <header><h1>网站标题</h1></header> <nav>...</nav> <main> <article> <h2>文章标题</h2> <p>正文内容...</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/ai/2444" title="Google Maps Agent"><img src="https://img.php.cn/upload/ai_manual/001/246/273/176611437238216.png" alt="Google Maps Agent" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/ai/2444" title="Google Maps Agent">Google Maps Agent</a> <p>Google地图应用构建智能体工具</p> </div> <a href="/ai/2444" title="Google Maps Agent" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </article> <section> <h2>相关资源</h2> <ul>...</ul> </section> </main> <aside>...</aside> <footer>...</footer> </body>错误写法（语义冲突）：
<article> <main><!-- ❌ 不要这样 --> <p>内容...</p> </main> </article>main 与 ARIA role="main" 的关系
如果因为历史原因或框架限制无法使用
<main></main>标签，可以用role="main"模拟其语义，例如：<div role="main">。但优先级顺序是：<code><main></main>>role="main"。两者不要同时用——浏览器和读屏器会重复识别，反而造成干扰。注意点：
-
<main></main>自带隐式role="main"，无需额外添加 - 若用了
<main></main>，又手动加role="main"，部分读屏器可能播报两次“main” - 不支持 HTML5 的旧浏览器（如 IE8 及以下）无法识别
<main></main>，需靠 JS 动态补role或降级处理
main 在 SEO 和无障碍中的实际影响
搜索引擎（如 Google）会参考语义标签判断内容主次，
<main></main>能帮助明确核心内容区块，间接提升相关性识别效率。对屏幕阅读器用户而言，<main></main>提供了快速跳转入口（例如 JAWS 按R键可直达 main）。但要注意：它不会自动提升排名，也不会修复内容质量缺陷。真正起作用的是——你是否把真正该放进去的内容放进去了。
容易被忽略的细节：
- 动态加载内容（如 SPA 页面）后，应确保
<main></main>包含新内容，而不是空着或残留旧 DOM - 服务端渲染时，避免把
<main></main>放在条件渲染分支里导致缺失 -
多语言站点中，
<main></main>不需要加lang属性——语言应由外层或具体子元素控制
-
