<article>表示可独立存在、可分发的内容单元（如博客正文、新闻），<section>仅是依赖上下文的主题逻辑分组（如“作者介绍”）；article内可嵌section，但section不可反向包裹多个article。

<article> 和 <section> 不是样式容器，用错就等于把结构标签当 <div> 使——语义丢失、SEO 折损、屏幕阅读器跳转失效。

什么时候该用 <article> 而不是 <section>

<article> 表示可独立存在、可被分发的内容单元；<section> 只是逻辑分组，不自带内容独立性。混淆两者，会让爬虫误判主次。

• 博客正文、新闻详情页、产品卡片 → 必须用 <article>
• 文章里的“作者介绍”“相关推荐”区块 → 用 <section>，不能套 <article>
• <article> 内部可以嵌套 <section>，但反过来不行
• 多个 <article> 并列时，建议外层包 <main> 或 <section>（视上下文而定）

<header> 和 <nav> 的嵌套边界在哪

<header> 是内容区的头部，不是整个页面的顶部栏；<nav> 专指导航链接集合。常见错误是把 logo + 搜索框 + 用户头像全塞进一个 <header>，结果破坏了语义层级。

• 每个 <article> 或 <section> 都可自带 <header>（比如带标题和时间）
• <nav> 必须包含至少两个有跳转意义的 <a>，纯按钮或 JS 触发菜单不算
• 页面顶部主导航 → <header> 里放 <nav>；侧边栏菜单 → 单独 <nav>，不嵌 <header>
• 不要为了“看起来像导航”而给 <div class="nav"> 加 role="navigation"——直接换 <nav>

<main> 必须且只能出现一次，但很多人漏写

浏览器和辅助技术依赖 <main> 定位核心内容。没它，屏幕阅读器用户得手动遍历所有 <section> 才能找到正文；搜索引擎也可能降权。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

立即学习“前端免费学习笔记（深入）”；

• <main> 应包裹页面唯一主体内容，不包括 <header>、<footer>、<aside>
• 不能嵌套在 <article> 或 <section> 内部
• 如果页面是仪表盘或后台系统，<main> 里可以是 <section> 堆叠，但不能空着或只放 loading 动画
• 检查方式：打开 Chrome DevTools → Elements 面板，搜索 <main>，确认只有一个且非空

为什么 <figure> + <figcaption> 不只是给图片用

<figure> 代表一个自包含的流内容单元，图、表、代码块、引用、SVG 都适用。忽略这点，就浪费了原生可访问性和 SEO 支持。

• 图表（<canvas> 或 SVG）+ 标题说明 → 用 <figure> 包裹
• 代码示例 →

  <figure><pre><code>...</code></pre><figcaption>JS 初始化逻辑</figcaption></figure></li>
  <li><code><figcaption>

  必须是 <figure> 的第一个或最后一个子元素
• 纯装饰图（如背景花纹）不用 <figure>，走 CSS background-image

最容易被忽略的是 <main> 缺失和 <article> 滥用——前者让整页结构“失焦”，后者把普通模块包装成“可分发内容”，反而稀释真实文章的权重。别只盯着能不能渲染出来，先问一句：这个标签告诉机器什么？