HTML中aside侧边栏位：HTML中aside标签在博客模板中的布局

aside是语义上属于旁注内容的容器，须与主内容有可剥离的附属性；DOM顺序必须匹配视觉顺序，main应在aside前；其布局需纯CSS控制，语义错位比样式错位危害更大。

aside 不是“做侧边栏的标签”，它是“语义上属于旁注内容”的容器。你在博客模板里硬把它塞到右边，但结构上和 main 毫无逻辑关联，那它就只是个披着语义外衣的 div。

aside 在博客里该放什么内容

它得和附近主内容有可剥离的附属性，不是随便塞个“热门文章”就叫合理：

• 放在某篇 article 内部时：术语解释、数据来源说明、作者补充观点（类似学术论文脚注区）
• 放在 main 同级时：当前页面专属的延伸阅读列表、本博客作者简介、本栏目广告（需加 role="complementary" 或标注“广告”）
• 不能放：全站导航菜单、页脚小工具、与当前文章完全无关的推广链接

DOM 顺序必须匹配视觉顺序

很多博客模板把 aside 放在 main 前面，再用 float: right 或 order 拉到右边——键盘 tab 焦点会先落在侧边栏，再跳进正文，屏幕阅读器用户会一头雾水：

• 正确做法：HTML 中 main 在前，aside 在后；CSS 用 display: flex + flex-direction: row 控制流向
• 若必须左侧显示，用 order: -1 调整视觉位置，但 DOM 仍保持 main → aside
• 响应式断点里记得重置：@media (max-width: 768px) { article { flex-direction: column; } }

aside 的宽度和定位必须靠 CSS 控制

浏览器对 aside 不做任何默认布局干预，它不会自动变窄、不会浮动、不会脱离文档流：

立即学习“前端免费学习笔记（深入）”；

• 别依赖 float：容易导致父容器塌陷，且现代布局中已属过时方案
• 推荐写法：aside { width: 300px; flex-shrink: 0; } + main { flex: 1; }
• 如果嵌套在 article 里，注意 aside 默认是块级元素，需显式设 display: block 才能参与 flex 布局
• 避免用百分比宽 + margin-left 这类老式 hack，易受父容器 padding 影响

最常被忽略的一点：语义错位比样式错位更难修复。一个错放的 aside，在 Lighthouse 里可能不报错，但会悄悄拖累 SEO 权重分配和辅助技术体验——它看起来像侧边栏，但机器读不懂它为什么在那里。