标签是HTML5定义的唯一主内容语义标记，必须全局唯一、不得嵌套于等分区元素内，且仅包裹真正构成页面主题的内容；滥用会导致无障碍访问失败、SEO摘要错乱及Lighthouse报错。
main 标签不是用来“撑结构”或“加样式”的，它是给屏幕阅读器、搜索引擎和 Lighthouse 等工具看的语义锚点——用错或滥用，会直接导致无障碍跳转失败、SEO 摘要错乱、检测工具报错。
为什么页面只能有一个 <main></main>
因为 HTML5 规范明确定义它为 document’s main content（文档的主内容），不是“主要内容之一”。
- 屏幕阅读器按
Tab或快捷键跳转到主内容时，只认第一个<main></main>；后面多个会被忽略或引发逻辑冲突 - Lighthouse 的“无障碍”审计项
Document has a main landmark会因重复或缺失直接扣分 - 搜索引擎可能把多个
<main></main>中的内容混为同一主题，导致摘要提取偏差（比如把页脚版权当成正文） - Next.js 的
app/layout.tsx里放<main></main>是常见错误——这里属于全局壳层，真正页面主体必须落在app/page.tsx或动态路由的page.tsx内部
<main></main> 能嵌套在 <header></header> 或 <footer></footer> 里吗
不能。HTML5 明确禁止 <main></main> 作为 <header></header>、<footer></footer>、<aside></aside>、<nav></nav> 的子元素。
- 浏览器解析时不会报错，但辅助技术可能完全跳过该
<main></main>，或将其语义降级为普通容器 - 常见误写：
<header><main>...</main></header>—— 这会让“登录入口”“搜索框”等导航相关元素被误判为核心内容 - 正确位置：必须是
的直接子元素，或至少与<header></header>、<footer></footer>并列 - Vue/React 中注意：组件模板若用
<template></template>包裹多个根节点，需确保<main></main>不被意外塞进父级语义区块内
什么内容该放进 <main></main>，什么不该
判断标准只有一个：**去掉它，当前页面是否还表达完整主题？**
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- ✅ 应包含：文章正文、商品详情、表单主体（如注册步骤）、搜索结果列表、用户仪表盘核心数据区
- ❌ 不应包含：全局导航栏、面包屑（
<nav aria-label="Breadcrumb"></nav>）、页脚版权、侧边栏“相关推荐”、页眉 Logo 和登录入口 - ⚠️ 容易混淆的“伪核心内容”：比如产品页里的“客服入口”按钮——它服务主题但不构成主题本身，应放在
<aside></aside>或<section></section>，而非<main></main> - SSR 场景下特别注意：服务端渲染出的
<main></main>必须与客户端 hydration 后的结构一致，否则 React/Vue 可能丢弃语义信息
不用 <main></main> 会怎样？用 role="main" 替代行不行
不用 <main></main> 不会崩，但等于主动放弃可访问性基础设施支持；而用 role="main" 替代反而更危险。
- 现代浏览器对原生
<main></main>的支持已全覆盖（IE11 除外），无需 polyfill -
role="main"是 ARIA 1.0 的遗留写法，与原生<main></main>共存时，部分读屏器会触发两次跳转，或优先采用 ARIA 导致原生语义失效 - 某些 CMS 或低代码平台自动生成的 HTML 会偷偷加
role="main"到<div> 上，此时再手动加 <code><main></main>就构成双重声明，Lighthouse 会报Duplicate main landmarks - 如果旧项目暂无法改结构，至少确保：全站统一用一种方式，且所有
role="main"都加aria-hidden="true"配合隐藏备用<main></main>
最常被忽略的一点：页面 URL 主题变了，<main></main> 的边界就得重划。比如从 /products 切到 /products/123，前者主内容是列表，后者必须是单个商品详情——不能复用同一段 DOM 结构包着两个不同粒度的内容。
