<main> 标签应且仅出现一次，作为页面主体容器，必须是 <body> 的直系子元素或嵌套于无语义 <div> 中，不可嵌套在 <article>、<section> 等内部，也不得与 <header>、<footer> 等并列；它承载可访问性、SEO 和语义化核心价值。
用 <main> 标签包裹核心内容，且只能出现一次
浏览器和辅助技术（比如屏幕阅读器）会把 <main> 当作页面“真正要读的部分”，搜索引擎也据此判断内容主次。如果一个页面里写了两个 <main>，部分读屏软件可能只识别第一个，SEO 也可能被降权。
常见错误现象：
– 把多个文章列表块都套上 <main>
– 在 <article> 或 <section> 内部又嵌套 <main>
– 用 <div class="main"> 替代，完全失去语义
- 一个 HTML 文档中
<main>应该且仅应出现一次 - 它不能是
<header>、<footer>、<aside>、<nav>的子元素 - 可以包含
<article>、<section>、<h1>等，但不要包裹导航或页脚信息
<main> 和 <section>、<article> 的边界在哪？
三者不是替代关系，而是层级与用途差异：<main> 是“整个页面的主体容器”，<section> 是“主题性分组”，<article> 是“可独立分发/复用的内容单元”。比如博客首页，<main> 包住全部文章流，每篇文章用 <article>，文章内的“评论区”或“相关推荐”可用 <section>。
使用场景判断口诀：
– 能单独 RSS 订阅或被转载？→ 用 <article>
– 是一个有标题的逻辑区块（不独立）？→ 用 <section>
– 整个页面去掉 header/nav/footer 后剩下的部分？→ 就是 <main>
立即学习“前端免费学习笔记（深入）”；
-
<section>必须有视觉或语义上的标题（<h2>或<h3>），否则建议改用<div> -
<article>可以嵌套在<main>内，也可以独立成页（如单篇文章 URL） - 不要为了“看起来整齐”而强行给每个
<div>换成<section>—— 无标题的<section>反而降低可访问性
兼容性与 fallback 怎么处理？
所有现代浏览器（Chrome 28+、Firefox 21+、Safari 7.1+、Edge 12+）都原生支持 <main>。IE 完全不支持，但它的市场份额已趋近于零；真需兼容 IE，只需加一句 JS 补丁：document.createElement('main')，CSS 中也不用额外 hack —— 浏览器会把它当普通块级元素渲染。
性能影响几乎为零：它不触发重排，不增加 DOM 复杂度，只是给节点打了个语义标签。
- 无需为
<main>写特殊 CSS，它默认就是display: block - 若用 CSS Grid/Flex 布局，
<main>可直接作为容器，和<div>行为一致 - 真正要注意的是：别在
<main>上写role="main"—— 这是冗余的，反而可能干扰某些旧版读屏器
容易被忽略的嵌套陷阱
最常被忽略的一点：<main> 不能出现在 <article>、<section> 或 <aside> 内部。它必须是 <body> 的直系子元素，或最多嵌套一层在 <div>（仅限需要 wrapper 的布局场景，且该 <div> 不应带语义）。
错误示例：<article><main>…</main></article> → 语义冲突，<article> 本身已是独立主体<section><main>…</main></section> → <section> 是子区域，不该包裹整个页面主体
- 检查方式：打开 DevTools，选中
<main>，看它的父节点是不是<body>或无语义<div> - 如果页面有多个“主要内容入口”（如 SPA 的路由切换），每次只让当前视图的容器拥有
<main>，其余隐藏区域移除该标签 - 服务端渲染时，确保模板引擎不会重复注入
<main>
