main标签必须唯一且位于body直接子级，禁止嵌套；header/footer可复用于各区块；article用于可独立分发内容，section用于主题分组；nav内仅允许导航链接。

main 标签必须唯一且不能嵌套

浏览器和屏幕阅读器靠 main 识别页面核心内容起点，重复或嵌套会直接破坏信息流。常见错误是 CMS 模板里全局插入一个 main，又在正文区域再套一层 —— 结果 DOM 中出现两个 main，读屏器跳过第二个，SEO 工具判定结构断裂。

实操建议：

• main 只能出现在 body 直接子级，且全页面仅一次
• 不要把 article 或 section 包进 main 里再加一层 main —— main 本身已是语义终点
• 若用前端框架（如 React/Vue）动态渲染，确保 SSR 或 hydration 后 DOM 中仍满足该约束

header 和 footer 不只属于页面顶层

很多人以为 header 只能用在页面最上面、footer 只能放在最底下，其实它们是“就近绑定”的语义容器：每篇 article、每个 section 都可以有自己的 header 和 footer，用来包裹该区块的标题、作者、时间、标签、分享按钮等。

容易踩的坑：

• 把发布时间写成 <p class="date">2026-06-20</p>，而不是 <time datetime="2026-06-20">6月20日</time>
• 用 <div class="article-header"> 替代 <code><header></header>，失去 ARIA role 和大纲锚点
• footer 放在 article 外面，导致读屏器无法将“相关链接”与对应文章关联

section 和 article 的边界由“可独立分发”决定

不是视觉卡片多就该套 article，关键看它能否脱离当前页面被 RSS 抓取、邮件转发或单独分享。首页上并列三篇博客，每篇都该是独立 article；但“关于我们”页里“团队介绍”“发展历程”“企业文化”三个板块，只是同一主题下的逻辑分组，用 section 更准确。


Html To Pdf
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
下载

判断依据：

• article 自带隐式 aria-roledescription="article"，会被聚合工具识别
• section 必须有明确主题，且推荐以 h2~h6 开头 —— 空 section 是结构噪音
• 嵌套层级超过 4 层时，大概率该重构：用 article 切分内容单元，而非靠 div + class 堆叠

导航链接必须严格限定在 nav 标签内

nav 不是“顶部那条横栏”的样式容器，而是语义契约：里面只允许放跳转链接。塞进图标、logo、搜索框、登录按钮，都会让辅助技术误判导航意图，也影响 SEO 权重分配。

真实使用场景：

• 主导航菜单（a 或 button 触发路由）—— 放 nav
• 页内锚点导航（如文档目录）—— 也放 nav，但需加 aria-label="文档目录"
• 页脚的友情链接、版权信息、备案号 —— 不属于 nav，应归入 footer

复杂点在于多级导航：子菜单必须仍是 nav 的直接子元素（如 ul），不能靠 JS 动态插入后脱离语义上下文；否则键盘焦点流断裂，读屏器跳过整个子项。