侧边栏本质是语义结构（nav或aside）与CSS布局（flex/grid）的组合，非标签自动渲染；nav用于导航链接并需aria-label，aside仅适用于可删除而不影响主文完整的附属内容。
侧边栏不是靠某个“模板标签”自动渲染出来的，它本质是语义结构（nav 或 aside） + CSS 布局（display: flex 或 display: grid）的组合结果；写对标签但没配 CSS，它照样堆在正文下面。
nav 和 aside 用哪个？先看内容是不是导航
如果侧边栏里全是跳转链接——比如文档大纲、章节锚点、分类目录，那就必须用 nav。搜索引擎和读屏器靠这个识别“这是导航区域”，nav + ul + li + a 是最小可访问结构。
如果放的是作者简介、延伸阅读、广告位或术语解释，且这些内容和主文有逻辑附属关系（删掉它不影响主文完整性），才考虑 aside。硬把全局主导航塞进 aside，会导致 SEO 权重错配、读屏器播报为“补充内容”却点了首页链接——这是典型语义误用。
-
nav必须带aria-label（如aria-label="文档大纲"），多个nav共存时靠这个区分 -
aside不能加tabindex="0"——它不是交互组件，焦点应自然流向内部的a或button - 当前激活项要用
aria-current="page"，不是只加class="active"
Flex 布局下 main 和 nav/aside 的宽度怎么设才不翻车
现代页面基本不用 float 或 position: fixed 控侧边栏了，display: flex 是最稳的起点。关键不是“谁左谁右”，而是主内容能否自适应剩余空间。
立即学习“前端免费学习笔记（深入）”；
父容器（比如 article 或带 class 的 div）必须设 display: flex，否则子元素的 flex 值完全无效。
- 侧边栏推荐写
flex: 0 0 260px，比width: 260px更安全——它禁止缩放，避免长文本或图片撑破布局 - 主内容区写
flex: 1，自动占满剩余宽度；若含未换行 URL 或长单词，额外加min-width: 0防溢出 - 别忘了
gap: 1.5rem控制间距，比手动写margin更可靠
@media 小屏断点里最容易漏掉的三件事
移动端不是简单把 display: none 一加就完事。隐藏会破坏键盘 Tab 顺序和读屏器流，真要收起得用视觉隐藏而非 DOM 移除。
- 小屏下优先用
flex-direction: column+order: -1把侧边栏提到顶部，保持 DOM 顺序与视觉一致 -
nav或aside加overflow-y: auto，防止长菜单撑爆视口；同时设max-height: 70vh更稳妥 -
nav ul li a必须设display: block，否则触控热区只有文字部分，小屏体验极差
真正容易被忽略的不是怎么让侧边栏“出现在右边”，而是 DOM 顺序是否匹配用户预期——比如 HTML 里 main 写在前面，CSS 却用 flex-direction: row-reverse 把 aside 推到右边，键盘 Tab 仍会从主内容开始；反过来，如果 aside 在 HTML 里写在 main 前面，哪怕视觉靠右，Tab 也会先进侧边栏。这个顺序问题，比任何动画都关键。
