<main>标签只能出现一次，因其语义定义整页唯一主体内容，必须直接嵌套在<body>中，不可被其他语义元素包裹，且多个<main>会导致可访问性工具失效和SEO弱化。
main 标签只能出现一次，不是为了“好看”或“习惯”，而是语义逻辑决定的——它代表整页唯一的、不可复用的主体内容。
它定义的是“页面级主干”，不是“区块级容器”
HTML5 中的 <main> 不是用来给每个模块加语义的工具，而是告诉浏览器和辅助技术：“从这里开始，才是这个 URL 页面真正独有的核心”。就像一本书只有一个正文部分，不会把目录、前言、附录都标成“正文”。
- ✅ 正确：整篇博客文章（标题+正文+评论区）包在一个
<main>里 - ❌ 错误：把每条新闻卡片、每个 tab 面板、每个商品区块各自套一个
<main> - ⚠️ 注意：多个
<article>可以共存于同一个<main>内，因为它们是“主干里的独立单元”，不冲突
结构上必须是顶层语义锚点
<main> 的父元素必须是 <body>，不能被 <header>、<nav>、<section> 或 <article> 包裹。这不是样式限制，而是语义层级不可嵌套：
-
<header>表示“页面顶部通用区域”，<main>表示“全页唯一主体”，主体不可能属于页眉 - 同理，
<footer>是复用区域，<main>是专属区域，二者逻辑互斥 - 嵌套会破坏 DOM 语义树，导致屏幕阅读器无法定位“跳转到主要内容”的唯一入口
可访问性与工具链依赖这个唯一性
读屏软件（如 NVDA、VoiceOver）内置“跳至主内容”快捷键，底层就是查找 <main>。如果存在多个，行为不可预测：
立即学习“前端免费学习笔记（深入）”；
- 可能跳过全部，用户卡在导航里出不来
- 可能随机选一个，导致关键内容被遗漏
- Lighthouse、axe 等检测工具直接报
duplicate-main错误，属于可访问性硬性失败 - 搜索引擎也会弱化对主内容区域的识别权重，影响摘要生成和排名
判断是否该放进 main，只看一条标准
这块内容复制粘贴到另一个页面，还能原样用吗？
- 能用 → 属于全局复用模块（如面包屑、热门标签、页脚版权），不该进
<main> - 不能用 → 属于当前页面独有（如某篇文章正文、某个表单提交页、某个数据看板视图），才该包裹进
<main> - SPA 场景下特别注意：每个路由组件（如 React 的 Home.jsx、About.jsx）不应自带
<main>，而应由根布局统一包裹一次
