aside仅用于与当前内容相关且可独立存在的附属信息，如作者简介、延伸阅读；全站导航应为nav，无关广告应降级为div或加role="complementary"。
用 aside 标签前先确认它是否真的“附属”
很多人把右侧栏或左侧工具栏直接套上 aside，结果语义错位。关键判断标准是：这块内容是否与当前上下文相关、可独立存在、但又不构成主线？比如文章页右侧的「作者简介」「相关术语解释」「延伸阅读」——这些属于补充，适合 aside；但如果是全站通用的左侧导航菜单，就该用 nav，而不是 aside。
常见误用现象：
- 把主导航塞进
aside，导致屏幕阅读器误判为次要内容 - 在
article外层用aside包裹广告，而广告与该文章完全无关（应降级为div或加role="complementary"） - 多个
aside并列却无明确归属关系，破坏结构层次
section 不是“样式盒子”，必须带标题且有主题
section 的本质是“一个有标题的主题区块”，不是为了撑宽高或加边框而存在的容器。例如产品页里「功能介绍」「用户评价」「技术参数」三个部分，各自有 <h2></h2>，才适合分别用 section 包裹。
容易踩的坑：
- 用
section包整个三栏外层容器——它没标题、无主题，纯属布局需要，该用div或直接设display: grid在body上 - 嵌套
section而不设子标题，比如在「用户评价」section里再套一个没h3的section来放单条评论——此时该用article - 把登录表单、搜索框等交互模块硬塞进
section，而它们更适配form+header或aside（视上下文而定）
三栏结构中 main、aside、section 的合法嵌套关系
HTML5 规范明确禁止 main 出现在 header、footer、aside、nav 内部。所以典型三栏的语义骨架只能是：
<header>...</header><nav>...</nav><main><article><header><h1>标题</h1></header><section><h2>引言</h2>...</section><section><h2>正文</h2>...</section></article></main><aside><h2>相关推荐</h2>...</aside><footer>...</footer>
注意点：
-
aside必须和main同级，不能包在main里面 - 如果左栏是导航，用
nav；右栏是辅助信息，用aside；中间必须是main，且只出现一次 -
section可以出现在main、article或aside内部，但每次出现都应自带标题
CSS 布局时别让视觉掩盖语义断裂
Flexbox 或 Grid 实现三栏视觉效果没问题，但别因为“看起来并排”就忽略标签层级。比如用 display: flex 把 nav、main、aside 拉成一行，没问题；但如果为了省事把 aside 放进 main 再用 position: absolute 拉出来，语义就断了——机器会认为它是主内容的一部分。
真正要注意的细节：
- 响应式断点下，
aside移到main下方时，DOM 顺序必须保持main在前、aside在后，否则屏幕阅读器会先读辅助内容 - 不要用
aria-hidden="true"隐藏aside，除非你确认它对所有用户（包括键盘导航者）都确实无用 - 当
aside里放广告时，建议加role="region"和aria-label="广告"，比裸用aside更准确
aside 和 section，错误就会自然浮现。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
