必须全页唯一且为直接子元素，专指不可替代的主体内容；用于可独立分发内容，仅作逻辑分组；限于主要导航系统；表示与主内容相关但非核心的补充信息；和可复用于各区块。

<header></header>、<nav></nav>、<main></main>、<article></article>、<section></section>、<aside></aside>、<footer></footer> 这些标签不是“锦上添花”，而是现代页面结构的基础设施——不用它们，<div> 堆出来的页面在屏幕阅读器里可能读成“盒子一、盒子二、盒子三”，搜索引擎也难判断哪块是正文、哪块是广告。 <h3>什么时候必须用 <code><main></main> 而不是 <section></section> 或 <div> <p><code><main></main> 表示页面唯一的核心内容区域，一个 HTML 文档中只能出现一次，且不能嵌套在 <article></article>、<aside></aside>、<footer></footer>、<header></header>、<nav></nav> 内部。它直接告诉辅助技术“这里才是用户真正该看的东西”。

• ✅ 正确：整页博客列表页的主体文章流包裹在 <main></main> 里；单篇博客页中，标题+正文+评论入口放在这里
• ❌ 错误：把侧边栏推荐、页脚版权、导航菜单塞进 <main></main> —— 浏览器会忽略语义，但屏幕阅读器可能错误聚焦
• ⚠️ 注意：<main></main> 不等于“视觉居中”或“最大容器”，CSS 布局和语义无关；用 display: contents 或 flex/grid 依然要保留其语义层级

<article></article> 和 <section></section> 的边界在哪

两者都表示“有主题的内容块”，但关键区别在于独立性与可重用性：<article></article> 是可独立分发、复用的内容单元（比如 RSS 订阅项），<section></section> 只是文档内部的逻辑分组，没有独立意义。

• ✅ <article></article>：一篇博客、一条论坛回帖、一个商品卡片（带标题、作者、时间、正文）
• ✅ <section></section>：文章里的“背景介绍”“技术原理”“使用示例”几个小节；产品页中的“参数详情”“用户评价”“售后服务”区块
• ❌ 把无标题、无作者、无时间戳的纯功能按钮组包装成 <article></article> —— 它不具备独立上下文，会被辅助设备误判为内容项
• ⚠️ 注意：<section></section> 理论上应有标题（<h2></h2>–<h6></h6>），否则语义弱化；而 <article></article> 内部必须包含至少一个标题级元素（通常是 <h1></h1> 或其它 heading）

<aside></aside> 不只是“侧边栏”，更不是“装饰性容器”

<aside></aside> 的语义是“与主内容相关但非核心”的补充信息，它可以出现在任何位置（顶部、文中、底部），甚至响应式折叠后仍保持语义完整。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• ✅ 合理用法：文章末尾的“作者简介”、段落旁的“术语解释框”、新闻稿里的“背景资料卡片”、代码块旁的“兼容性说明”
• ❌ 常见滥用：仅因视觉上靠右就套 <aside></aside>；把整个右侧导航栏、广告位、登录表单硬塞进去
• ⚠️ 注意：如果一块内容对理解主文完全无关（比如全站通用的客服弹窗、全局通知条），它不属于 <aside></aside>，应保留在 直接子级或用 <dialog></dialog>/<div role="region"> 显式声明 <h3>为什么 <code><nav></nav> 不能随便套在任意链接集合上

  <nav></nav> 专指“主要导航区块”，不是所有链接都要语义升级。浏览器和辅助工具会为 <nav></nav> 提供快捷跳转（如 NVDA 的 N 键），滥用会导致跳过失效或干扰用户操作。

  • ✅ 应用场景：主导航栏、面包屑导航（<nav aria-label="Breadcrumb"></nav>）、页内锚点目录（TOC）
  • ❌ 不适用：文章末尾的“上一篇/下一篇”、页脚里的“隐私政策｜用户协议”、评论区的“回复此条评论”链接
  • ⚠️ 注意：多个 <nav></nav> 允许存在，但建议用 aria-label 区分，例如 <nav aria-label="Primary navigation"></nav> 和 <nav aria-label="Article table of contents"></nav>

  最常被忽略的一点：语义标签本身不带默认样式，但它们改变了浏览器的隐式 ARIA 角色（如 <main></main> 对应 role="main"）。删掉一个 <main></main>，可能让屏幕阅读器用户失去快速定位正文的路径；而给 <div class="nav"> 加再多 CSS，也无法自动获得 <code><nav></nav> 的语义权重和跳转支持。