标签必须且只能出现一次，代表页面独一无二的主要内容，不可嵌套于等语义元素内，应包含正文、文章等核心信息，排除导航、页脚、侧边栏等全局复用内容。
main 标签必须且只能出现一次
是 HTML5 中语义化标记页面主体内容的专用元素，它代表文档中与当前页面最直接相关、独一无二的主要内容。浏览器、屏幕阅读器和搜索引擎都依赖这个标签快速定位核心信息区。
常见错误是把它当成 判断标准很简单：去掉这部分，用户是否还知道这个页面是干什么的？如果答案是否定的，那它大概率属于 所有现代浏览器（Chrome 26+、Firefox 21+、Safari 7.1+、Edge 12+）原生支持 立即学习“前端免费学习笔记（深入）”； 仅加 以下代码满足 W3C 规范，能被主流读屏器正确识别为主内容区： 本文详解 main、section、article 的边界…
注意：这里没写任何 CSS，也没用 JS；语义完整性完全由 HTML 结构本身保证。实际项目中容易忽略的是 ，或者在 内部再套一层 。这会破坏语义结构，导致辅助技术跳过或误读内容。
元素最多只能存在一个、、、 的子元素（这些本身已有明确语义）～，但若页面已有顶级 在 内建议用 起始，避免层级混乱什么内容该放进 main，什么不该放
；如果是“锦上添花”或“全局复用”，就该挪走。
、（含正文、列表、表单主体、产品详情等）、独立图表容器）、侧边栏推荐/广告（）、面包屑导航（可用 ） 内容，但标签本身位置不变；不要用 JS 把整个 替换掉，而应只替换其子节点兼容性与无障碍支持要点
，IE 完全不支持，但可通过 role="main" 回退。role="main" 不够——某些旧版读屏软件仍需要显式声明 aria-labelledby 或确保其有可访问的标题。更稳妥的做法是：
添加 id，并用 或 关联（如 最新文章
...aria-labelledby="main-title"）（如 display: none），这会让读屏器彻底忽略它；改用 visibility: hidden + position: absolute 等组合时务必测试 放在 内部——父页面无法识别其语义作用域
一个最小但合规的 main 使用示例
我的博客
最新文章
HTML5 语义标签实践
aria-labelledby 与标题 ID 的匹配，以及误把导航或筛选控件塞进 ——它们虽在视觉上靠近正文，但逻辑上不属于“主要内容”。
