aside标签是语义化标记附属内容的HTML5元素，非视觉侧边栏容器；它表示与主内容相关但可移除而不影响逻辑完整的补充信息，须嵌套在article或main内，需CSS实现布局且须兼顾响应式与无障碍。

aside 标签不是“写成侧边栏”的工具，而是语义标记

很多人一看到 aside 就默认它会自动靠右、悬浮或固定宽度——其实它什么样式都不带，浏览器只当它是普通块级元素。它的核心价值是告诉搜索引擎、读屏器和开发者：“这部分内容和主内容相关但非必需”。用错位置，反而会破坏可访问性和 SEO。

常见错误现象：aside 被直接塞进 header 或 footer 里当装饰；或者在文章中间硬插一个广告模块却没包在 article 内，导致语义断裂。

• 放在 article 内部：适合词汇表、术语解释、作者注释等强上下文关联内容
• 放在 main 或页面顶层：适合全站级推荐、分类导航、广告位、社交链接等
• 不能独立存在：比如单独一个 aside 没有包裹在 main 或 article 中，又没上下文支撑，就属于语义滥用

aside 必须配 CSS 才能“看起来像侧边栏”

仅写 <aside></aside> 不会产生任何布局效果。现代项目中，主流做法是用 Flexbox 或 Grid 控制位置，而不是老式 float。

典型 Flex 布局示例：

立即学习“前端免费学习笔记（深入）”；

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

<div class="container">
  <main class="main-content">...</main>
  <aside class="sidebar">...</aside>
</div>

CSS 部分：

.container { display: flex; gap: 20px; }
.main-content { flex: 1; }
.sidebar { flex: 0 0 280px; }

• flex: 0 0 280px 比 width: 280px 更安全，避免内容撑破容器
• 别漏掉 gap，否则左右紧贴，移动端易误触
• 如果用 Grid，注意 grid-template-columns: 1fr 280px 在小屏下必须重写，否则侧边栏会横向滚动

响应式中 aside 容易被忽略的三个坑

很多项目在桌面端调好后就上线，结果在 iPhone 上发现侧边栏把主内容挤出屏幕、或焦点跳转错乱、或读屏器完全跳过它——问题基本都出在这三处。

• 没加 @media (max-width: 768px) 重置 display：小屏应设为 display: block 并取消 flex，让 aside 自然流到底部
• 没控制 max-width：窄屏下若只设 width: 280px，可能超出 viewport，要补 max-width: 100%
• 键盘焦点顺序错乱：用了 position: absolute 或 z-index 把 aside “提”出来，但 DOM 顺序仍在后面，Tab 键会直接跳过它；必须保持结构顺序与视觉顺序一致

无障碍支持不能只靠标签名

aside 自带 role="complementary"，但部分老旧读屏器（如 JAWS 2020 以下）识别不稳定。显式声明更稳妥。

正确写法：

<aside role="complementary" aria-label="推荐阅读">
  <h3>推荐阅读</h3>
  <ul>...</ul>
</aside>

• aria-label 比仅靠内部 h3 更可靠，尤其当 h3 被 CSS 隐藏时
• 如果 aside 里有搜索框或筛选按钮，确保它们有 tabindex="0" 或原生可聚焦属性（如 input），否则键盘用户进不去
• 别用 display: none 隐藏整个 aside，要用 visibility: hidden + aria-hidden="true"，否则读屏器会彻底忽略它

实际部署时最常翻车的点不在怎么写，而在“以为写了 aside 就等于完成了侧边栏”——它只是语义起点，后续样式、响应式、无障碍都得手动闭环。