标签纯语义化，声明页面唯一不可复用的核心内容区域，须严格唯一且不得嵌套于/等元素内，否则破坏语义并导致辅助技术失效。

不是定义业务逻辑的标签，它只负责声明“当前 URL 对应的、不可复用的核心内容区域”——浏览器不执行它，JS 不监听它，后端不解析它。它的作用纯语义：告诉屏幕阅读器“按 M 键跳到这里”，告诉 Lighthouse “这部分是主内容评分依据”，告诉搜索引擎“摘要优先从这里抽”。

怎么确认页面只有一个

标签

浏览器不会报错，但多个

会让辅助技术失效。必须手动验证：

• 打开开发者工具（F12），在 Elements 面板按 Ctrl+F（Windows）或 Cmd+F（macOS），搜索
• 检查匹配结果是否严格只有 1 个开始标签和 1 个结束标签
• 特别注意 SPA 场景：React/Vue 中每个路由组件都写
  {children}
  ，最终 DOM 会叠加出多个；应只由最外层路由容器（如 App.tsx 或 page.tsx）包裹一次
• 服务端模板（EJS/Twig）中，避免列表页与详情页共用同一套
  包裹逻辑，导致嵌套或并列渲染

为什么不能嵌套在

或

里

HTML5 规范明令禁止

作为

、

、

、

的后代元素——这不是样式问题，是语义冲突。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• 错误写法：
  ...
  → 屏幕阅读器可能完全忽略该
  ，或将其降级为普通容器
• 正确结构：必须与
  、
  、
  平级，且直接隶属于
• 可以作为
  的子元素存在，但仅限“本页专属标题与元信息”，比如文章页的
  和发布时间，而非网站全局 Logo + 主导航

里该放什么、不该放什么

判断标准只有一个：这块内容是否“随 URL 变化、不可复用”。复制粘贴到另一个页面还能原样用？那它就不属于

。
• ✅ 应包含：
  、
  （商品列表）、
  （独立提交表单）、
  （如“用户评价”子模块）
• ❌ 必须排除：
  （全局导航）、
  （版权信息）、
  （侧边推荐）、面包屑、登录框、固定侧栏
• ⚠️ 常见误判：首页的“热门推荐”区块——若它不随路由变化（比如始终是通用运营位），就该用
  ，而不是塞进

最容易被忽略的是：SPA 中动态更新内容时，

标签本身位置不能变，只替换其子节点；不要用 JS 整体移除再重建
，否则读屏器会丢失焦点锚点。