标签必须且只能出现一次，是html5规范强制要求，多个会破坏可访问性、导致lighthouse报错、降低seo权重，并被屏幕阅读器忽略或随机处理。

只能有一个。多一个都会被浏览器和辅助技术当作语义错误处理，不是“建议”，是 HTML5 规范强制要求。

为什么 Lighthouse 会报 “Multiple main elements”

这不是警告，是硬性失败项。工具检测到两个及以上 <main></main> 标签时，直接扣分并标记为可访问性缺陷。

• 屏幕阅读器（如 NVDA、VoiceOver）依赖 <main></main> 作为“跳转到主要内容”的唯一锚点；多个存在时，它可能跳过全部，或随机选一个，用户根本进不到正文
• 搜索引擎会降低该页面主内容区域的可信度权重，尤其在重复 <main></main> 包裹相似结构（如多个文章卡片）时，易被判定为模板滥用
• SPA 框架（React/Vue）中常见错误：每个路由组件都自带 <main></main>，实际应由最外层 Layout 统一包裹一次，子组件只负责填充内容

哪些写法会导致 <main></main> 被隐式忽略

即使 DOM 里只写了一个 <main></main>，结构错误也会让它失效。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• <header><main></main></header> —— <main></main> 不能是 <header></header> 的后代，规范明令禁止
• <article><main></main></article> —— 同理，<main></main> 不得嵌套在 <article></article>、<aside></aside>、<nav></nav> 等语义容器内
• <main aria-hidden="true"></main> —— 加了 aria-hidden 也无效，语义标签不能靠隐藏绕过校验

<main></main> 里到底能放什么

判断标准就一条：这块内容复制粘贴到另一个页面，还能原样用吗？如果能，就不该进 <main></main>。

• ✅ 正确：博客文章页的 <h1></h1> 标题、正文 <p></p>、作者信息、发布时间、评论区（仅限当前文章专属）
• ❌ 错误：面包屑导航、全局搜索框、右侧“热门标签”侧边栏、页脚版权信息 —— 这些在首页、分类页、归档页都一样，属于复用模块
• ⚠️ 边界情况：弹窗内容若为当前操作核心（如表单提交成功提示），可用 <section role="region" aria-labelledby="xxx"></section> 替代，别硬塞进 <main></main>

最容易被忽略的点是：服务端模板未做条件判断，导致首页和文章页共用同一 layout，结果生成两个 <main></main>；或者开发者把“视觉上居中”等同于“语义上为主”，把 banner 或轮播图也塞进去。语义不是看位置，是看复用性。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！