中的main标签是什么
作者：袖梨
2026-06-28
<main>是HTML5中唯一标识页面不可复用主体内容的语义化标签，必须且只能出现一次，直接位于<body>下，不可嵌套于header、footer、nav等重复性结构中。
main 标签是 HTML5 引入的语义化元素，用于明确标记页面中「唯一、不可复用的主体内容」。它不是视觉容器，不自带样式，但对辅助技术（如读屏器）和搜索引擎有实际识别意义——浏览器会把它当作当前页面的“核心舞台”。
为什么不能在 header、footer 或 nav 里放 main
HTML 规范强制要求 main 不能是 header、footer、nav、aside 或另一个 main 的后代。这不是兼容性问题，而是语义冲突：主体内容不可能“属于”页眉或导航栏。
- 错误写法：
<header><main>...</main></header>—— 浏览器可能不报错，但会忽略语义，读屏器可能跳过或误读 - 正确位置：直接放在
<body>下，与<header>、<nav>、<footer>并列 - 动态渲染（如 React/Vue）时，需确保路由切换后
main仍保持顶层位置，避免被框架组件意外包裹
main 和 section、article 的关系是什么
main 是页面级容器，描述“整页的主干”；section 和 article 是内容组织单元，描述“某一块有主题的内容”。它们可以嵌套，但职责不重叠。
-
main里可以包含多个article（如博客列表）、多个section（如产品介绍 + 用户评价 + FAQ） - 但
main本身不能替代article：比如一篇独立文章，应该用<article><h1>标题</h1>...</article>包裹，再放进main - 不要用
main去“分块”布局——那是section或 CSS Grid/Flex 的事
常见错误：多 main、伪 main、SEO/可访问性陷阱
看似合法的写法，实际会破坏语义有效性：
立即学习“前端免费学习笔记（深入）”；
- 同一页面出现两个
<main>—— 即使 JS 动态插入，也会被辅助技术视为错误，部分读屏器只识别第一个 - 把面包屑、登录框、版权声明塞进
main—— 这些是全站复用内容，违反“唯一性”原则，SEO 权重会被稀释 - 用
<div role="main">替代<main>—— 虽然 ARIA 角色能模拟部分行为，但原生main支持更早、更稳定，且无需额外声明 - 服务端渲染（SSR）页面中，
main内容为空或仅占位符（如 loading 状态），会导致首屏可访问性降级
真正难的不是写对标签，而是判断「哪些内容才算页面唯一主体」——这需要结合业务逻辑做取舍，比如电商商品页的 SKU 切换、后台仪表盘的 Tab 切换，都得保证每次渲染后 main 里的内容仍是当前视图的不可复用核心。
