表示可独立存在、可分发的内容单元（如博客正文、新闻），仅是依赖上下文的主题逻辑分组（如“作者介绍”）；article内可嵌section，但section不可反向包裹多个article。
<article></article> 和 <section></section> 不是样式容器，用错就等于把结构标签当 <div> 使——语义丢失、SEO 折损、屏幕阅读器跳转失效。
<h3>什么时候该用 <code><article></article> 而不是 <section></section>
<article></article> 表示可独立存在、可被分发的内容单元；<section></section> 只是逻辑分组，不自带内容独立性。混淆两者，会让爬虫误判主次。
- 博客正文、新闻详情页、产品卡片 → 必须用
<article></article> - 文章里的“作者介绍”“相关推荐”区块 → 用
<section></section>，不能套<article></article> -
<article></article>内部可以嵌套<section></section>，但反过来不行 - 多个
<article></article>并列时，建议外层包<main></main>或<section></section>（视上下文而定）
<header></header> 和 <nav></nav> 的嵌套边界在哪
<header></header> 是内容区的头部，不是整个页面的顶部栏；<nav></nav> 专指导航链接集合。常见错误是把 logo + 搜索框 + 用户头像全塞进一个 <header></header>，结果破坏了语义层级。
- 每个
<article></article>或<section></section>都可自带<header></header>（比如带标题和时间） -
<nav></nav>必须包含至少两个有跳转意义的<a></a>，纯按钮或 JS 触发菜单不算 - 页面顶部主导航 →
<header></header>里放<nav></nav>；侧边栏菜单 → 单独<nav></nav>，不嵌<header></header> - 不要为了“看起来像导航”而给
<div class="nav"> 加 role="navigation"——直接换 <code><nav></nav><main></main>必须且只能出现一次，但很多人漏写浏览器和辅助技术依赖
<main></main>定位核心内容。没它，屏幕阅读器用户得手动遍历所有<section></section>才能找到正文；搜索引擎也可能降权。-
<main></main>应包裹页面唯一主体内容，不包括<header></header>、<footer></footer>、<aside></aside> - 不能嵌套在
<article></article>或<section></section>内部 - 如果页面是仪表盘或后台系统，
<main></main>里可以是<section></section>堆叠，但不能空着或只放 loading 动画 - 检查方式：打开 Chrome DevTools → Elements 面板，搜索
<main></main>，确认只有一个且非空
为什么
<figure></figure>+<figcaption></figcaption>不只是给图片用<figure></figure>代表一个自包含的流内容单元，图、表、代码块、引用、SVG 都适用。忽略这点，就浪费了原生可访问性和 SEO 支持。- 图表（
<canvas></canvas>或 SVG）+ 标题说明 → 用<figure></figure>包裹 - 代码示例 →
<figure><pre class="brush:php;toolbar:false;"><code>...</code>
JS 初始化逻辑 <figcaption> 必须是 <code><figure></figure>的第一个或最后一个子元素- 纯装饰图（如背景花纹）不用
<figure></figure>，走 CSSbackground-image
最容易被忽略的是
<main></main>缺失和<article></article>滥用——前者让整页结构“失焦”，后者把普通模块包装成“可分发内容”，反而稀释真实文章的权重。别只盯着能不能渲染出来，先问一句：这个标签告诉机器什么？ -
