aside标签是语义化标记附属内容的HTML5元素，非视觉侧边栏容器；它表示与主内容相关但可移除而不影响逻辑完整的补充信息，须嵌套在article或main内，需CSS实现布局且须兼顾响应式与无障碍。
aside 标签不是侧边栏的“自动布局开关”
直接写 <aside></aside> 不会让内容跑到右边，浏览器只把它当普通块级元素处理——它默认垂直堆在 <main> 下方，和 <p> 行为一致。语义上它表示“可省略的附属内容”，但视觉位置、宽度、浮动、响应式行为，全得靠 CSS 控制。
哪些内容真适合放进 aside？先过语义关
判断标准只有一个：删掉它，主文是否依然成立、逻辑是否自洽？如果答案是肯定的，且和当前上下文有弱主题关联，才考虑 aside。
- 文章内的术语解释、生平简介、引用来源（放在
<article>内部时） - 整页级的相关链接、推荐阅读、作者简介（放在
<body>级，与<main>并列） - 兼容性说明、版本备注等补充性文本
- 绝对不要放：主导航（该用
<nav>）、登录表单（该用<form>）、工具栏按钮、广告横幅（SEO 和可访问性风险高）
让 aside 真正“靠边”的现代 CSS 方案
别用 float——清除浮动麻烦、响应式难控制、易引发重排。推荐直接上 display: flex 或 display: grid：
main {
display: flex;
gap: 1.5rem;
}
aside {
flex: 0 0 260px;
}
或更明确的网格方案：
body {
display: grid;
grid-template-columns: 1fr 260px;
gap: 1.5rem;
}
main { grid-column: 1; }
aside { grid-column: 2; }
- 移动端必须加
@media (max-width: 768px)把aside设为display: block并塞到<main>后面，否则小屏会横向溢出 - 如果
aside在<article>内部，它的语义范围仅限于该文章，不能跨 article 共享 - 别忘了给
aside加aria-label（如aria-label="相关链接"），否则屏幕阅读器只会读 “complementary landmark”，用户不知道里面是什么
相关链接放 aside 的典型结构和坑点
常见错误是把一堆 <a> 塞进去就完事，但缺乏语义包装和可访问性支持：
<aside aria-label="相关链接">
<h2>延伸阅读</h2>
<ul>
<li><a href="/glossary/html">HTML 语义标签指南</a></li>
<li><a href="/blog/seo-aside">如何提升 aside 的 SEO 效果</a></li>
</ul>
</aside>
-
<h2>是必要的：提供层级锚点，方便键盘用户跳转 - 避免用
<div>包裹链接列表——<ul>才表达“一组相关项” - 链接目标页最好和当前页有明确主题关联，否则会被搜索引擎判定为语义错配
- 如果相关链接是 JS 动态加载的，记得手动触发
aria-live或更新aria-busy，否则辅助技术可能卡住
最常被忽略的一点：aside 的价值不在“看起来像侧边栏”，而在于告诉浏览器、爬虫和读屏软件“这部分可以安全折叠、跳过或延后加载”——所以它的内容必须真的能被省略，否则语义就崩了。
