<aside> 是语义化标签，仅用于放置不影响主内容理解的辅助信息，如延伸阅读、段落补充说明或弱相关公告；须避免用作导航、登录框等结构性内容。
用 <aside> 做侧边栏，关键不是“放右边”，而是“内容性质是否匹配”。它不是视觉定位标签，而是语义容器——只适合放那些拿掉也不影响主内容理解的辅助信息。
先判断：这真是<aside>该干的活吗？
如果侧边栏里是导航菜单、网站Logo、全局搜索框或页脚链接，那它其实是页面结构的一部分，应该用 <nav>、<header> 或 <section>。只有满足以下任一条件，才考虑 <aside>：
- 内容移走后，主文章依然逻辑完整（比如博客右侧的「延伸阅读」）
- 内容专为当前段落服务，属于补充说明（如代码块旁的「浏览器兼容提示」）
- 内容全站统一、与当前页面主题弱相关（如固定在右下角的「运营公告」）
结构写法：嵌套要有逻辑，别堆砌
<aside> 内部不是空白画布，要继续用语义化标签组织：
- 用
<h2>或<h3>标明区块标题（如「作者简介」「相关文章」） - 列表类内容用
<ul><li>，避免纯<p>堆叠 - 若含引用或术语解释，可嵌套
<blockquote>或<figure>，但需保持与主内容的相关性 - 避免在
<aside>里塞登录表单、主导航或版权声明——这些不属于“附属信息”
CSS布局：语义和样式要分开想
<aside> 本身不带样式，靠 CSS 实现并排或响应式切换：
立即学习“前端免费学习笔记（深入）”；
- 主内容用
<main>，侧边用<aside>，父容器设为display: flex最直观 - 移动端建议用媒体查询把
<aside>放到<main>下方，避免窄屏挤占阅读空间 - 不要用
position: fixed强行钉死——固定定位会破坏文档流，对屏幕阅读器不友好；如确需固定，应额外加aria-hidden="true"并提供跳过链接
常见陷阱：别让语义变成形式主义
很多开发者以为把 <div class="sidebar"> 换成 <aside> 就算语义化完成，其实不然：
- 如果
<aside>里放的是全站通用的「客服入口」，但它出现在每篇文章页且位置固定，就违背了“与上下文弱耦合”原则，更适合用<section>+ 明确 heading - 文章页右侧的「作者卡片」若仅展示当前作者，且卡片内容随文章变化（如发表时间、编辑记录），它其实属于该
<article>的一部分，应放在<article>内部，而非外层<aside> - 多个
<aside>并列时，每个都应有独立语义，不能只为布局方便而拆分
