语义标签需严格按原型功能而非样式使用：页头用，导航用并加aria-label，主内容区唯一且不可嵌套用，侧边栏依逻辑相关性选或。

直接按原型图里的区域功能贴标签，别管视觉样式——页头写 <header></header>，导航栏套 <nav></nav>，主内容区必须用 <main></main>（且全页只能有一个），侧边栏看是否“与当前内容间接相关”再决定用 <aside></aside> 还是 <section></section>。

看到“顶部栏”就闭眼敲 <header></header>，但得确认它是不是真页头

原型图上标着“Logo + 搜索 + 用户头像”的横条，基本就是 <header></header>；但如果只是某篇文章上方的作者信息+发布时间，那该用 <article></article> 里的 <header></header>（注意：<article></article> 内部可以有自己独立的 <header></header>）。常见错误是把登录弹窗、广告 Banner 也塞进页面级 <header></header>，它们不属于全局页头，该放 <section></section> 或 <aside></aside> 里。

导航不是“有链接就是 <nav></nav>”，而是“提供跳转路径”才用

原型图里出现的顶部菜单、左侧菜单栏、面包屑、页脚一排链接组——这些都该用 <nav></nav>。但要注意：

html-ppt-to-pdf

将使用 `

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

下载

• 文章末尾的“你可能还喜欢”推荐列表，本质是内容延伸，不是导航，用 <section></section> 更合适
• 多个 <nav></nav> 必须加 aria-label 区分，比如 <nav aria-label="主导航"></nav> 和 <nav aria-label="页脚导航"></nav>，否则屏幕阅读器会混淆
• 纯 JS 驱动的 Tab 切换栏，如果没真实跳转 URL，别硬套 <nav></nav>，用 <div role="tablist"> 更准确 <h3> <code><main></main> 是唯一且不可嵌套的，原型里“核心内容区”必须严格对应它

  原型图上标着“主要内容”“正文区域”“用户列表展示区”的大块区域，就是 <main></main> 的落点。关键约束有三个：

  • 一个 HTML 文档中只能有一个 <main></main>
  • 它不能出现在 <article></article>、<aside></aside> 或 <section></section> 内部
  • 搜索框、筛选栏、分页控件如果属于服务主内容的工具，应放在 <main></main> 里面；但如果是全站通用的顶部搜索，则归 <header></header>

  侧边栏、卡片、广告位别乱用 <aside></aside>

  <aside></aside> 不等于“右边那一栏”，它的语义是“与当前内容间接相关”。比如博客正文旁的“作者简介”“同类文章推荐”，可用 <aside></aside>；但首页右上角的“今日热搜榜”“客服入口”或轮播广告，跟当前内容无逻辑关联，该用 <section></section> 或独立 <footer></footer>。更稳妥的做法是：拿不准就先用 <section></section>，等逻辑明确后再升级语义。

  最常被忽略的是 <main></main> 缺失和 <nav></nav> 缺 aria-label——前者让屏幕阅读器找不到内容起点，后者让多导航场景完全不可操作，这两处一错，后续所有语义努力都打折扣。