aside标签用于标记与主内容弱关联、可移除而不影响逻辑完整的附属信息，如术语解释、作者简介、事件时间线等；必须满足删去后主内容仍清晰自洽，且需CSS实现视觉布局，不可仅凭位置判断使用。
aside 标签不是侧边栏的视觉实现方案，而是用来标记「与主内容相关但可移除而不影响逻辑完整」的附属信息。用错位置，HTML 结构语义就先垮了。
什么内容真正适合放进 aside
只问一个问题：删掉整个 aside 区块后，主内容是否依然表意清晰、逻辑自洽？答案是“是”，才考虑用它。
- 文章内的术语解释，比如
<h3>什么是 WebAssembly？</h3><p>一种二进制指令格式…</p> - 单篇
article下的作者简介、延伸阅读链接、相关代码示例 - 新闻页中嵌入的“事件时间线”“人物背景”卡片
- API 文档里穿插的
<strong>注意</strong>：该接口不支持 IE11提示块 - 产品页中的“客户评价摘要”，前提是它不构成购买决策核心依据
这些内容都满足三个条件：与主文有弱关联、自身表达完整、抽离后不破坏主干叙事。
为什么不能把导航或广告直接塞进 aside
主导航菜单、页脚版权、悬浮客服按钮这些，和主内容没有语义从属关系——它们是页面结构部件，不是“对这篇文章的补充”。浏览器和读屏器会把 aside 当作可跳过区块处理，用户可能根本听不到导航项。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 主导航应始终用
nav，哪怕它物理上在右侧 - 全站广告位若放在
body级别，需明确标注为广告（例如加aria-label="广告"），且不宜用aside包裹，除非它是某篇文章的关联推广（如教程文末推荐配套工具） -
header或footer内部嵌套aside属于语义滥用，因为它的上下文已被父容器定义
aside 必须配 CSS 才能“看起来像侧边栏”
浏览器对 aside 默认只设 display: block，没有任何浮动、宽度、定位或背景区分。写完发现它还堆在正文下面？不是标签失效，是 CSS 没跟上。
- 现代布局首选
display: flex或display: grid控制主辅流顺序，避免老式float导致的父容器塌陷 - 响应式断点里必须重置
display，小屏下让aside自然流至主内容下方，否则易横向溢出 - 不要仅靠视觉位置判断是否该用
aside——先确认语义关系，再决定样式表现
aside 放在 article 内还是 body 下？
取决于语义作用范围。这不是布局问题，是归属问题。
- 放在
article内：表示仅服务于该文章的附属内容，如某篇教程里的“兼容性说明表” - 放在
body下、与main并列：表示全站级补充，如“本周热门话题”“社交分享入口”，但需确保它和整页主题存在合理弱关联 - 禁止孤立存在：单独一个
aside没包裹在article或main中，又无上下文支撑，属于语义断裂
最容易被忽略的一点：搜索引擎可能弱化 aside 内容的权重，因为它被明确定义为非主干；反过来，如果把关键摘要、核心参数硬塞进去，反而干扰理解。语义正确永远比“看起来像侧边栏”重要得多。
