侧边工具栏不是导航，应使用<aside>或<section>而非<nav>；若含纯交互控件（如按钮、开关），优先<aside>表附属功能，全局工具栏则用<section role="region">并加aria-label。
侧边工具栏不是导航，别硬套
如果这个“侧边工具栏”里放的是操作按钮（比如“复制代码”“导出PDF”“深色模式开关”）、状态指示器、快捷设置面板，而不是跳转链接，那它就不是导航功能。
-
<nav>必须包含语义上可跳转的链接（<a href>），且应有明确的导航意图 - 纯 JS 交互控件（如
<button onclick="toggleTheme()">）应放在<aside>或<section>中，而非<nav> - 若工具栏同时含链接和按钮，可拆分：链接部分用
<nav>，操作部分用<aside>
侧边工具栏属于附属功能，优先用
<aside> 的语义是“与主内容相关但可独立存在的部分”，非常契合工具栏的定位：它辅助主内容（比如在文档页右侧提供格式化工具），但移除后不影响正文阅读或理解。搜索引擎和屏幕阅读器能据此判断该区域非核心，也不会把它当作主导航或主要内容来处理。
- 不要因为“它在右边”就默认用
<aside>；关键是内容是否附属——广告、作者简介、术语注释、实时状态面板都适用 -
<aside>可以出现在<main>内部（如文章右侧的引用栏），也可作为全局布局的一部分（如整站右侧的快捷工具） - 避免嵌套
<nav>在<aside>里，除非 aside 内真有一组独立的导航（比如“相关工具文档”链接列表）
当工具栏是页面级固定UI时，考虑用 + role
如果侧边工具栏是全站统一的、带复杂交互的 UI 组件（比如 IDE 风格的左侧命令面板，含折叠菜单、搜索框、图标按钮组），且它不直接关联某一篇主内容，而是服务于整个视口，那么 <aside> 可能语义过窄——它更偏向“内容附属”，而这类工具栏其实是“界面附属”。此时 <section> 更中性，再配合 ARIA 明确角色更稳妥。
- 给
<section>加role="region"和aria-label="主工具栏"，确保屏幕阅读器能识别其用途 - 避免用
<div>替代——即使加了 class 和 aria，缺失语义容器仍会让辅助技术失去结构锚点 - CSS 布局（如
position: fixed）与标签选择无关，<aside>或<section>同样支持固定定位
容易被忽略的关键点：main 和 aside 的层级关系
很多人把 <aside> 直接写在 <body> 下，和 <header>、<main> 并列，这本身没问题。但一旦 <aside> 出现在 <main> 内部，就必须确认它是否真的从属于该主内容块。例如，在一篇技术文章的 <main> 里放一个“本文代码片段下载”工具栏，用 <aside> 是合理的；但如果在 <main> 里塞了一个全站通用的“夜间模式切换器”，那就破坏了 <main> 的单一职责——它应该只包裹用户真正要读/操作的核心内容，其他全局 UI 应在 <main> 外围组织。
立即学习“前端免费学习笔记（深入）”；
