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 权重分配和辅助技术体验——它看起来像侧边栏，但机器读不懂它为什么在那里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
