<main>必须且只能出现一次，是页面当前视图核心内容的唯一语义锚点，须直接位于<body>下、不可嵌套于<header><footer><nav>内，重复或错位会破坏可访问性、触发Lighthouse报错并影响SEO。

标签不是布局工具，也不是视觉居中手段，它只表达一个事实：当前页面里，哪一块内容是不可复用、随URL变化、构成该页存在理由的唯一核心。用错位置、重复出现、或塞进不该有的内容，会直接干扰辅助技术识别和搜索引擎理解。

必须且只能有一个

HTML5规范与WCAG 2.1都强制规定：

在整个文档中只能出现一次。这不是“建议”，而是硬性约束。

• 多个
  会让屏幕阅读器（如NVDA、VoiceOver）无法稳定响应“M键跳转主内容”，可能跳过、随机选取，甚至反复播报“主内容开始”
• Lighthouse会明确报错duplicate-main，axe工具标红，SEO也可能因语义混乱而降权核心内容识别
• 常见翻车点：React/Vue中每个路由组件都写
  ；服务端模板未区分列表页与详情页，统一套用

  包裹逻辑；SPA路由切换后旧

  未清理，新内容又渲染一个

必须直接位于body下，不能嵌套

不能是

、

、

、

或

的子元素——因为主体内容不可能“属于”页眉、页脚或导航栏。这是语义冲突，不是兼容性问题。

• 错误写法：
  …
  → Lighthouse报The element main must not appear as a descendant of the header element
• 正确结构：
  ，所有语义区块平级并列
• 例外允许：
  内部可包含

  ，但仅限本页专属标题（如文章

  、发布时间、作者），而非全站Logo+主导航

内容必须“不可复用”

判断某段内容该不该放进

，就问一句：把它复制粘贴到另一个页面，还能原样用吗？能，就不该放。

SEO Content Optimizer

通过关键词策略、标题/元标签、内容结构及页面SEO优化文章和网页，提升自然搜索排名。

下载

• 应放入：博客正文、商品详情、表单主体、当前页专属评论区
• 应移出：全局导航栏、页脚版权信息、右侧分类侧边栏、“关注我们”通用模块
• 若页面有多个栏目（如首页含文章列表+推荐位+最新动态），全部统一包在一个
  内，而不是给每个栏目单独加

验证与修复方法很直接

浏览器不会主动报错，但错误极易被忽略。必须人工确认：

立即学习“前端免费学习笔记（深入）”；

• 打开开发者工具（F12），在Elements面板按Ctrl+F（Windows）或Cmd+F（macOS），搜索
• 结果应仅匹配一对开始与结束标签；若发现多处，删掉冗余项，只保留包裹当前路由视图的那个
• 检查
  的父元素是否为；如果不是，剪切整个

  块，粘贴到层级，与

  同级
• SPA项目中，应在根Layout组件中声明唯一
  ，用或作为其唯一子节点，避免各页面组件自行渲染