HTML中aside标签在双栏博客布局中的应用

aside标签不构成双栏布局，需CSS控制；必须与main同级，仅局部补充时才嵌入article；flex需设宽和order；小屏应自然下移而非display:none。

aside 标签本身不构成双栏布局，它只负责声明“这部分内容是附属的”；真正实现双栏视觉效果，必须靠 CSS 的 display: flex 或 display: grid 控制，且需严格匹配语义层级。

aside 必须和 main 同级，不能塞进 article 或 main 里

双栏博客中，如果右侧是全站级推荐文章、标签云或作者简介，aside 就该和 main 并列，同为 body 的直接子元素。嵌套在 main 里会违反 HTML5 规范，部分校验工具报错，读屏器也可能误判范围。

1. ✅ 正确结构：<main></main><aside></aside>（同级）
2. ❌ 错误写法：<main><aside></aside></main>（aside 被当成主内容一部分）
3. ⚠️ 特殊情况：若右侧内容只服务于某一篇博文（比如该文专属的术语解释），才应把 aside 写在 article 内部，此时它不参与全局双栏，而是局部补充

用 flex 实现双栏时，aside 宽度和 order 必须显式控制

仅写 display: flex 不够，aside 默认会撑满整行。必须设宽度，否则小屏下溢出；若 HTML 中 aside 写在 main 前面，但想视觉上放右边，还得用 order 调整流顺序，否则键盘焦点和读屏播报顺序错乱。

1. aside 至少要设 flex: 0 0 280px 或 width: 280px，不能只靠 max-width
2. 若 aside 在 HTML 中位于 main 之前，加 main { order: 1; } 和 aside { order: 2; } 才能保证视觉右置且逻辑顺序一致
3. 别用 float: right —— 父容器易塌陷，文字可能绕进侧栏，且 IE11 已淘汰

响应式断点必须让 aside 自然下移，不能 display: none

小屏下强行隐藏 aside，等于告诉搜索引擎和读屏器“这内容不存在”。法律声明、版权归属、作者信息这类关键附属内容一旦被 display: none，就丧失语义价值。

1. 正确做法：在 @media (max-width: 768px) 中设 aside { display: block; margin-top: 1.5rem; }，让它自然流到 main 下方
2. Grid 布局可直接改 grid-template-columns: 1fr，无需重写 DOM 顺序
3. 若 aside 里有交互元素（如搜索框、订阅表单），更得保留——它们不是装饰，而是功能入口，此时应考虑是否真该用 aside，还是换成 section 或 form

最常被忽略的点是：语义边界不可妥协。一个 aside 放在 article 里，就只服务这一篇；想在多篇文章复用同一组推荐列表？得复制，不能靠 JS 搬运 DOM —— 语义不是样式，不能动态绑定。