必须是的直接子元素且唯一，否则浏览器忽略其landmark身份，导致seo报错、读屏软件跳过主内容；仅用于主导航结构，与区别在于是否可独立分发。

必须用 <header></header>、<nav></nav>、<main></main>、<section></section>、<aside></aside>、<footer></footer> 搭骨架，不能靠 <div class="header"> 之类模拟 —— 浏览器和屏幕阅读器根本不认 class 名，只看标签名。 <h3>为什么 <code><main></main> 必须是 的直接子元素且只能有一个

这是 HTML5 规范硬性要求，不是建议。一旦嵌套在 <div> 或 <code><section></section> 里，<main></main> 就失效：浏览器会忽略其 landmark 身份，SEO 工具（如 Lighthouse）会报 “Missing main landmark”，NVDA 等读屏软件可能跳过整个主内容区。

• 错误写法：<div class="wrapper"><main>...</main></div>
• 正确写法：<header>...</header><main>...</main><footer>...</footer>
• 单页应用（SPA）切换路由时，不要销毁/重建 <main></main>，应复用原有节点并替换内部内容

<nav></nav> 不是所有链接集合都适用，得看功能是否“提供跳转路径”

<nav></nav> 专指主导航类结构，比如顶部菜单、面包屑、页脚导航栏。但文章末尾的“相关推荐”列表本质是内容延伸，不是导航，用 <section></section> 更合适。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

• 多个 <nav></nav> 允许存在，但建议加 aria-label 区分，例如 <nav aria-label="主导航"></nav> 和 <nav aria-label="页脚导航"></nav>
• <nav></nav> 可以放在 <header></header> 内，也可以独立于其外；但不应塞进 <footer></footer> 作为主要导航使用
• 裸写在 最顶层的 <nav></nav> 会被识别为“主导航”，若非此意图，务必加 aria-label

<section></section> 和 <article></article> 的关键区别在“能否独立分发”

<article></article> 表示可脱离上下文单独存在的内容单元（比如 RSS 订阅一条新闻、转发一条微博），必须自带标题（<h1>–<h6></h6> </h1>）；<section></section> 是逻辑分组，删掉父级就失去意义，也需有标题，但不强调独立分发。

• 博客正文 + 标题 → 用 <article></article>
• “关于我们”、“服务介绍”这类页面内分区 → 用 <section></section>
• <section></section> 不能包裹 <main></main>，也不能被 <main></main> 外层再套一个 <section></section>（W3C Validator 会直接报错）
• <aside></aside> 不等于“右边栏”，而是与主内容相关但可独立存在的辅助信息，如作者简介、广告、侧边推荐

最容易被忽略的是 <main></main> 的唯一性和直系子元素约束——它不像 <div> 那样随便嵌套，一错整个语义结构就塌了，连带影响 SEO 和无障碍访问。写完记得用 DevTools 的 Accessibility 面板检查 computed role，<code><header></header> 应为 banner，<main></main> 应为 main，而不是 generic。