aside通过嵌套位置确立语义关联：嵌套在article内则服务单篇内容，与main同级则服务整页；其语义由DOM层级决定，不依赖属性或CSS布局，删除后主内容须仍自洽完整。
aside 标签本身不提供“链接”功能，它通过 HTML 结构位置建立语义关联——即“放在哪，就服务哪”。这种关联不是靠属性、ID 或 JavaScript 绑定，而是由嵌套层级直接决定。
它不依赖 class、data-* 属性或 aria-labelledby；浏览器、搜索引擎和读屏器只看 DOM 树中的父子/兄弟关系。把 aside 放进 article 里，它就天然属于那篇文章；把它和 main 并列在 body 下，它就服务整页。
嵌套在 article 内：绑定单篇内容
这是最常见也最符合语义的用法。aside 成为该 article 的一部分，逻辑上不可分割，但内容可省略。
- 适合场景：术语卡片、作者简介、兼容性说明、文中引用来源、补充图表
- 示例结构：
<article><h2>CSS Containment</h2><p>…正文…</p><aside><h3>术语解释</h3><p>contain: layout 表示元素内部布局不受外部影响</p></aside></article> - 关键点：删掉这个 aside，文章标题和正文仍能独立成立、被理解
与 main 同级并列：服务整页上下文
当 aside 出现在 <main> 同一层（都是 <body> 的直接子元素），它表达的是全站级辅助信息。
- 适合场景：右侧热门文章列表、分类导航、订阅入口、版权说明
- 建议加
aria-label明确用途，例如：<aside aria-label="热门技术文章"> - 注意：不能塞进
<header>、<footer>、<nav>或<main>内部——HTML5 规范禁止
不靠位置“猜”，而靠结构“定”
语义关联不是视觉对齐带来的错觉。即使你用 CSS 把一个放在 <main> 前面的 aside 拉到右边，只要它没嵌套进 article，它就不属于那篇文章。
- 错误做法：把全站广告栏放进某篇 article 的 aside 里——广告与文章无逻辑关联
- 正确判断标准只有一个：抽掉这个 aside，主内容是否依然自洽、完整、可理解？
- 如果答案是否定的（比如删了就看不懂术语、找不到数据来源），那它其实该是主内容的一部分，不该用 aside
