aside：补充内容
使用 aside 表示侧边栏和相关性较弱的内容
aside：补充内容 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
aside 元素
<aside> 元素用于标记与周围内容存在间接关联的内容：
- 将其从主要内容中分离后，主要内容的含义仍不会丢失
- 可以将它理解为：侧边栏、提示框、引文摘录和广告
文章中的 aside
在文章内部，aside 用于标记与叙述相关但并非必需的信息：
<article>
<h2>How the Internet Works</h2>
<p>The Internet is a global network of computers...</p>
<aside>
<h3>Did You Know?</h3>
<p>The first email was sent in 1971 by Ray Tomlinson.</p>
</aside>
<p>Data travels in packets across routers...</p>
</article>页面级 aside
在页面级别，aside 用于表示侧边栏：
<div class="layout">
<main>
<article>...</article>
</main>
<aside>
<h2>Related Articles</h2>
<ul>...</ul>
<h2>Newsletter</h2>
<p>Subscribe for updates.</p>
</aside>
</div>aside 的 ARIA 角色
页面级的 <aside> 会映射为 role="complementary"：
<aside aria-label="Related resources">
<h2>Related resources</h2>
...
</aside>
<!-- Multiple asides should be uniquely labeled
Screen reader users can jump directly to complementary regions -->使用 aside 表示引文摘录
引文摘录（为增强视觉效果而摘出的引文）可以标记为 aside：
<aside class="pullquote">
<blockquote>
<p>HTML is the foundation of the web — learn it well.</p>
</blockquote>
</aside>使用 aside 表示广告
侧边栏中的广告单元可以标记为 aside：
<aside aria-label="Advertisement">
<p class="sr-only">Advertisement</p>
<img src="ad.jpg" alt="Learn JavaScript online — 50% off">
</aside>aside 与分区元素
关键区别：
<aside>—— 与主要内容存在间接关联；属于补充内容<section>—— 按主题构成主要内容的一部分
使用 aside 表示术语说明
使用 aside 定义文章中使用的术语：
<article>
<p>The DOM (Document Object Model) is updated when...</p>
<aside id="dom-def">
<dl>
<dt>DOM</dt>
<dd>Document Object Model — the browser's tree representation of an HTML page.</dd>
</dl>
</aside>
</article>多个侧边栏分区
侧边栏中的 aside 可以包含多个相互独立的分区：
<aside aria-label="Sidebar">
<section>
<h2>About the Author</h2>
<p>Jane Smith is a senior web developer...</p>
</section>
<section>
<h2>Popular Posts</h2>
<ul>...</ul>
</section>
</aside>aside 不需要标题
与分区元素不同，aside 不严格要求有标题：
<!-- Valid aside without heading: -->
<aside>
<img src="banner.jpg" alt="20% off this week only">
</aside>
<!-- But adding a heading (even visually hidden) improves accessibility -->
<aside>
<h2 class="sr-only">Promotions</h2>
<img src="banner.jpg" alt="20% off this week only">
</aside>aside 不用于表示侧边栏样式
Aside 具有语义含义——不要仅仅为了实现视觉上的侧边栏布局而使用它：
<!-- BAD: aside used for layout only -->
<aside class="right-column"> <!-- no semantic relationship to main content -->
<div class="ad">...</div>
</aside>
<!-- GOOD: aside for related content -->
<main><!-- article content --></main>
<aside><!-- genuinely related supplementary info --></aside>快速检查
页面级 aside 会映射到哪个 ARIA 地标角色？
回顾：aside
aside 的要点：
- 与周围内容存在间接关联的内容
- 页面级侧边栏 → 补充性地标
- 文章内部 → 补充信息（术语定义、提示内容）
- 使用 aria-label 为多个 aside 添加标签
- 不用于纯布局容器——此时应使用通用容器
常见问题解答
「aside：补充内容」课时是免费的吗？
是的 — 「aside：补充内容」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「aside：补充内容」这节课中我会学到什么？
使用 aside 表示侧边栏和相关性较弱的内容 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「aside：补充内容」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。