aside标签适用于与主内容主题关联但非主线的推荐内容，如相关文章、延伸阅读等，需满足可删除不损主干、语义绑定当前上下文、dom顺序与视觉逻辑一致三大原则。
aside 标签适合标记与当前主内容有明确主题关联、但非主线构成的推荐类内容，比如“相关文章”“延伸阅读”“同类热门”，关键在于它必须服务于当前上下文，且移除后主内容依然完整可读。
相关文章应嵌在 article 内部，体现强上下文绑定
当“相关文章”出现在某篇博客正文右侧或文末时，它只对该文章生效——例如一篇讲 CSS Grid 的教程旁列出三篇关于 Flexbox、响应式布局和 CSS 自定义属性的文章。这种场景下，aside 应作为 article 的直接子元素：
- 语义正确：浏览器和读屏器知道这些推荐仅围绕当前文章展开
- 结构清晰：不会被误判为全站通用导航或广告
- SEO 友好：搜索引擎能识别其补充性，避免稀释主文关键词权重
推荐内容若跨多篇文章，需放在 main 外层并明确归属范围
如果页面是列表页（如“前端技术合集”），右侧固定展示“本周热门文章”，这类推荐不绑定单篇文章，而是服务整页。此时 aside 应与 main 并列，同级于 header：
- 不能塞进某个 article 里，否则语义越界——它不属于某一篇，而是全页级补充
- 建议加 aria-label="热门推荐"，方便读屏器用户快速理解用途
- 避免混用：同一页面若有多个推荐区块，每个 aside 都要有独立逻辑边界，不可复用为两篇文章的推荐源
内容本身要满足“可删不损主干”的硬标准
判断是否该用 aside，不是看它长得像不像侧边栏，而是问：删掉整个区块，用户还能否准确理解原文核心？
- ✅ 合规：一篇介绍 React Hooks 的文章，aside 里放“Vue Composition API 对比表”——主题相关、可抽离、自成信息单元
- ❌ 不合规：同一页面中，aside 里塞“最新招聘公告”或“公司年会通知”——与技术文章无逻辑关联，应降级为 div + role="complementary"
- ⚠️ 边界情况：电商商品页的“搭配购买”推荐，若属于营销强引导而非内容补充，更宜用 section 或带 role="region" 的容器，而非 aside
视觉布局靠 CSS，但语义顺序决定可访问性
即使你用 flex 或 grid 把 aside 摆到右边，HTML 中它的位置仍影响键盘导航流和读屏器解析顺序：
- 若 aside 在 HTML 中写在 main 之后，但 CSS 强行提到左侧，Tab 键会跳过它——必须保持 DOM 顺序与视觉逻辑一致
- 小屏下务必用 @media 重置为 display: block 并置于 main 下方，否则横向溢出或遮挡正文
- 内部含链接时，加上 aria-label="相关文章推荐"，比单纯用 nav 更精准传达意图
