71. aside 标签

本节目标：理解 aside 表示与主内容间接相关的附加内容，能正确区分它和 nav。

<aside> 定义与主要内容间接相关的补充信息。删除 aside，主内容仍然完整。

aside 的典型用法

侧边栏
相关链接列表
引用/引言（pull quote）
广告
术语解释框

常见场景

侧边栏

<body>
  <main>
    <article>
      <h1>文章标题</h1>
      <p>正文内容...</p>
    </article>
  </main>

  <aside>
    <h3>热门文章</h3>
    <ul>
      <li><a href="#">文章 1</a></li>
      <li><a href="#">文章 2</a></li>
    </ul>
  </aside>
</body>

热门文章和当前文章相关，但删掉侧边栏，文章照样完整。

文章内的补充说明

<article>
  <h1>量子计算入门</h1>
  <p>量子计算利用量子力学原理进行计算。</p>

  <aside>
    <h4>什么是量子比特？</h4>
    <p>量子比特是量子计算的基本信息单位。</p>
  </aside>

  <p>传统计算机使用比特，量子计算机使用量子比特...</p>
</article>

这个 aside 是术语解释框。删掉它，文章依然通顺。

引用

<aside>
  <blockquote>
    "好的代码是它自己的文档。"
  </blockquote>
  <p>—— 某程序员名言</p>
</aside>

aside vs nav

aside 和 nav 都可能放在页面侧面。区别是：

nav：导航链接（去哪里）
aside：补充信息（了解什么）

<!-- 导航：主要去哪里 -->
<nav>
  <a href="/">首页</a>
  <a href="/about">关于</a>
</nav>

<!-- 侧边栏：补充信息 -->
<aside>
  <h3>热门标签</h3>
  <ul>...</ul>
</aside>

aside 不一定是侧边栏

aside 不一定在页面侧面。它可以在任何位置，只要内容是”间接相关的补充信息”。

<article>
  <h1>标题</h1>
  <p>正文...</p>
  <aside>
    <p>注：本文数据来源于 2026 年调查。</p>
  </aside>
  <p>更多正文...</p>
</article>

这里的 aside 在文章中间，是注释说明。

完整示例

<body>
  <header>
    <h1>前端技术博客</h1>
    <nav>
      <a href="/">首页</a>
      <a href="/html">HTML</a>
      <a href="/css">CSS</a>
    </nav>
  </header>

  <div class="layout">
    <main>
      <article>
        <h2>Flexbox 布局详解</h2>
        <p>Flexbox 是一种一维布局方法...</p>
        <aside>
          <h4>小贴士</h4>
          <p>flex 是 flex-grow、flex-shrink 和 flex-basis 的简写。</p>
        </aside>
      </article>
    </main>

    <aside>
      <h3>相关推荐</h3>
      <ul>
        <li><a href="#">Grid 布局入门</a></li>
        <li><a href="#">CSS 盒模型</a></li>
      </ul>
    </aside>
  </div>

  <footer>
    <p>版权所有 2026</p>
  </footer>
</body>

正文内的小贴士用 aside，页面侧边栏也用 aside。都是补充信息。

判断 aside 的核心标准：删掉它，主内容是否还能独立理解？能，就是 aside。