aside应仅用于可删除而不影响主内容完整性的附属信息，如文章内术语解释、作者简介、事件时间线、技术备注、同类热销榜（无cta）；禁用主导航、页脚、登录表单、带cta广告、面包屑导航。

aside标签该用在哪些真实内容上？

只有删掉整个aside区块后，主内容仍能独立成立、表意完整，才考虑用它。不是“长得像侧边栏就套aside”，而是看语义是否真的附属。

常见合格场景包括：

• 文章内的术语解释卡片，比如<h3>什么是 WebAssembly？</h3> + 两行说明
• 博客正文旁的「本文作者」简介，含头像、职位、GitHub 链接
• 新闻稿中嵌入的「事件时间线」，独立成块且不参与叙事主线
• 技术文档右侧的「注意」「小贴士」「兼容性备注」，仅作提醒，非操作必需
• 商品页里的「同类热销榜」，前提是没放“立即购买”按钮——它不能是转化关键路径

这些内容共同点是：可跳过、可折叠、不影响主逻辑推进。

哪些地方绝对不能用aside？

用了反而破坏语义，让读屏器和搜索引擎误判。最常踩的坑是把功能型模块硬塞进aside。

明确禁用场景：

• 主导航菜单：该用nav，不是补充，是核心入口
• 页脚版权信息或备案号：该用footer，属于页面级元信息
• 登录/注册表单：它是用户关键操作路径，不是附属信息
• 带 CTA 的广告横幅（如“限时领取”按钮）：读屏器默认跳过，SEO 可能降权
• 面包屑导航：应套nav + aria-label="breadcrumb"

判断标准很简单：如果去掉这块内容，用户无法完成主要任务（比如找不到首页、登不上账号、看不到底部联系方式），那就不是aside该管的事。

DOM顺序和CSS布局怎么配合才不翻车？

aside本身不浮动、不定位、无默认样式。视觉靠右靠左，必须靠flex或grid控制；用float易塌陷，响应式难维护。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

关键陷阱在 DOM 顺序：

• 如果 CSS 把aside提到右边，但 HTML 里它写在main后面，键盘 Tab 会直接跳过它——因为焦点流按 HTML 顺序走
• 正确做法：HTML 中aside紧跟main之后（或嵌在article内），再用order属性调整视觉位置
• 小屏下必须用@media (max-width: 768px)把aside设为display: block并流到底部，否则横向溢出

Flex 布局天然支持逻辑流与视觉流分离：main { order: 1; }，aside { order: 2; }，哪怕aside在 HTML 中写在前面，Tab 键仍按主文→侧栏走。

嵌套和跨 article 复用要注意什么？

aside可以嵌套，但语义范围严格受限于父元素。一个aside不能同时服务两篇不同文章。

允许的嵌套方式：

• 嵌在article内：只对该篇文章生效，比如某篇 React 教程旁的「Vue 对比表格」
• 作为main的兄弟元素、同级于header：服务整页，如全站「热门分类」
• 延伸阅读列表里某条推荐文章自带作者引言，那条引言可再包一层aside，但必须保持弱关联性

禁止的嵌套：

• 不能作为header、footer、address的子元素——这些标签已有明确的内容边界定义
• 不能跨article复用：一个aside不能同时为两篇不同文章提供补充信息

最容易被忽略的点是：语义判断永远在布局之前。先想清楚“这段内容到底服务谁、能不能删”，再决定放哪儿、怎么排版。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！