aside仅负责语义标记，不控制布局；必须配合css（如flex或grid）才能实现右侧显示、响应式收起等视觉效果，否则默认为块级独占一行。

直接用 aside 标签不会让内容“侧边栏化”，它只负责语义标记；真正决定是否显示为侧边栏、在哪显示、怎么响应式收起的，全是 CSS。

为什么写了 aside 却没出现在右边？

因为 aside 是纯语义标签，浏览器默认把它当普通 div 渲染：块级、100% 宽、独占一行。不加 CSS，它永远不会自动靠右或并排。

• 常见错误：只写 <aside><p>作者简介</p></aside> 就以为完事了
• 正确做法：必须给父容器和 aside 同时设布局规则，比如 display: flex 或 display: grid
• 旧项目若还在用 float，记得给主内容加 overflow: hidden 或 clear: both 防止文字环绕错位

怎样用 flex 把 aside 真正“摆”到主内容旁边？

现代最稳的方案是 Flexbox，结构清晰、断点友好、无需清除浮动。

• 父容器（如 article 或 main）设 display: flex; gap: 20px;
• main 或主内容区域加 flex: 1;，让它自适应剩余宽度
• aside 设固定宽（如 width: 300px;）或弹性宽（flex: 0 0 300px;）
• 响应式断点里必须重置：小屏下 @media (max-width: 768px) { article { flex-direction: column; } }，否则 aside 会强行撑宽页面

aside 放错位置会导致什么问题？

语义错位比样式错位更难排查，尤其影响 SEO 和读屏器体验。

• 放在 <header></header> 或 <footer></footer> 里：浏览器虽能渲染，但读屏器会误读为“页眉补充区”，逻辑断裂
• 包裹主导航或登录按钮：违反“可移除而不影响主逻辑”的前提，应改用 nav 或带 role="navigation" 的 div
• 放广告且无额外标注：搜索引擎可能降权，WCAG 要求广告需明确标识，建议用 <div role="complementary" aria-label="广告"> <li>嵌套在 <code><section></section> 但没就近关联内容：比如整页只有一个 section，里面塞了 3 个 aside，语义粒度就模糊了

要不要给 aside 加 role 或 aria-label？

要，尤其当内容类型不直观或需兼容老旧读屏器时。

• role="complementary" 是 aside 的隐含语义，现代读屏器基本识别，但显式加上更稳妥
• 如果 aside 内容是“客户评价摘要”，加 aria-label="客户评价摘要" 比空着强
• 动态插入的 aside（比如 JS 加载的推荐列表），记得用 aria-live="polite" 告诉读屏器内容已更新
• 别加 role="sidebar"——这不是标准 ARIA role，会被忽略

最容易被忽略的其实是语义边界：一个 aside 应该紧贴它所服务的最近一块主内容（article 或 section），而不是堆在 body 底部再靠 CSS 拉上去——那样 HTML 结构和视觉呈现就彻底脱钩了。