<main>标签必须且只能出现一次，是HTML5规范强制要求，多个会破坏可访问性、导致Lighthouse报错、降低SEO权重，并被屏幕阅读器忽略或随机处理。
只能有一个。多一个都会被浏览器和辅助技术当作语义错误处理，不是“建议”，是 HTML5 规范强制要求。
为什么 Lighthouse 会报 “Multiple main elements”
这不是警告，是硬性失败项。工具检测到两个及以上 <main> 标签时，直接扣分并标记为可访问性缺陷。
- 屏幕阅读器（如 NVDA、VoiceOver）依赖
<main>作为“跳转到主要内容”的唯一锚点；多个存在时，它可能跳过全部，或随机选一个，用户根本进不到正文 - 搜索引擎会降低该页面主内容区域的可信度权重，尤其在重复
<main>包裹相似结构（如多个文章卡片）时，易被判定为模板滥用 - SPA 框架（React/Vue）中常见错误：每个路由组件都自带
<main>，实际应由最外层 Layout 统一包裹一次，子组件只负责填充内容
哪些写法会导致 <main> 被隐式忽略
即使 DOM 里只写了一个 <main>，结构错误也会让它失效。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
<header><main></main></header>——<main>不能是<header>的后代，规范明令禁止 -
<article><main></main></article>—— 同理，<main>不得嵌套在<article>、<aside>、<nav>等语义容器内 -
<main aria-hidden="true">—— 加了aria-hidden也无效，语义标签不能靠隐藏绕过校验
<main> 里到底能放什么
判断标准就一条：这块内容复制粘贴到另一个页面，还能原样用吗？如果能，就不该进 <main>。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：博客文章页的
<h1>标题、正文<p>、作者信息、发布时间、评论区（仅限当前文章专属） - ❌ 错误：面包屑导航、全局搜索框、右侧“热门标签”侧边栏、页脚版权信息 —— 这些在首页、分类页、归档页都一样，属于复用模块
- ⚠️ 边界情况：弹窗内容若为当前操作核心（如表单提交成功提示），可用
<section role="region" aria-labelledby="xxx">替代，别硬塞进<main>
最容易被忽略的点是：服务端模板未做条件判断，导致首页和文章页共用同一 layout，结果生成两个 <main>；或者开发者把“视觉上居中”等同于“语义上为主”，把 banner 或轮播图也塞进去。语义不是看位置，是看复用性。
