目录导航不应使用 aside 标签,因其是服务于主内容阅读的功能性导航,删除后会严重损害用户定位体验,违背 aside“删除不影响主内容完整性”的语义;应改用 nav + section + heading 组合,并通过 css 控制右侧布局。

文章详情页右侧的目录导航,**不适合用 aside 标签**。
为什么目录导航不能放 aside
目录导航(如“本文目录”“跳转到小节”)是用户浏览当前文章的功能性入口,它直接服务于主内容的阅读流程,不是可有可无的补充信息。移除它,用户仍能读完正文,但获取结构、快速定位的体验会严重受损——这违背了 aside 的核心语义:内容必须“删除后不影响主内容逻辑完整性”。
- 目录与文章是强绑定关系,属于内容导航层,不是旁注或背景资料
- 屏幕阅读器会把
aside当作附注区域略过或降权处理,而目录需要被识别为重要导航节点 - SEO 也倾向于将
aside内容视为低优先级,不利于目录中关键词的语义传递
正确标签组合:nav + section + heading
右侧目录应使用语义更精准的结构:
- 外层用
<nav aria-label="本文目录"></nav>—— 明确声明这是导航区块,读屏器可识别并提供快捷跳转 - 内部用
<section></section>包裹标题和列表,增强区块归属感 - 目录标题用
<h2>本文目录</h2>(保持层级连续),列表用语义化<ol></ol>或<ul></ul>
布局实现:靠 CSS,不靠标签位置
aside 不等于“右边的栏”,nav 同样如此。视觉上靠右,完全由 CSS 控制:
- 父容器(如
<div class="layout">)设 <code>display: flex或display: grid -
<main></main>占主区域,<nav></nav>设固定宽(如flex: 0 0 260px)并置于右侧 - 响应式下(如
@media (max-width: 768px)),让<nav></nav>改为display: block并流至主内容下方
如果非要“类 aside”风格,可用 role 补充
极少数场景下,若目录仅作为轻量提示(如纯锚点缩略,无语义层级),且你坚持用 div 包裹,可加 role="navigation" 和 aria-labelledby 提升可访问性,但仍不推荐替代 nav。











