section与aside是主辅并列关系：section内嵌aside表局部关联，如“咖啡萃取”节内插“萃取时间小知识”；aside独立于section则服务全页，如博客首页右侧“本周豆单推荐”。

section 和 aside 不是父子替代关系，而是语义上“主辅并列”的协作关系：一个 section 可以包含 aside，但 aside 不能用来替代 section；反过来，aside 也可以独立于任何 section 存在，直接放在 body 下作为全页级附属内容。

section 内嵌 aside：关联局部内容

当 aside 提供的信息只与当前 section 的主题强相关时，应将其嵌入该 section 内部。这种嵌套明确表达了“这条补充说明属于这一节”。

• 例如，在一篇介绍“日本料理”的 section 中，用 aside 插入“寿司米的挑选要点”或“酱油等级小贴士”，读者能立刻理解这是本节内容的延伸参考。
• 注意：嵌套后，aside 的语义范围被限定在该 section 内，屏幕阅读器和搜索引擎也会将其视为该区块的附属信息。
• 不建议在 section 里塞导航菜单、全局版权信息或跨区块广告——这些不属于“局部附属”，应移出或另用 nav/footer。

aside 独立于 section：服务整页或跨区块

若 aside 的内容与多个 section 相关，或作用于整个页面（如作者简介、站内搜索框、热门标签云），就应直接置于 body 下，与 section 并列，而非嵌套其中。

• 比如博客首页有三个 section（最新文章、分类归档、友情链接），而右侧统一的“作者动态 Twitter 摘要”更适合用独立 aside 包裹，不隶属于任一节。
• 此时它的语义是“全页级辅助信息”，不影响任一 section 的完整性，移除它也不会削弱各区块的表达力。
• 避免把它放在 header 或 footer 里——那些已有明确角色，aside 专指“可分离但相关的补充内容”。

常见误用提醒

嵌套不是为了“视觉对齐”，而是为了语义准确。错误用法会破坏结构可读性：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 用 aside 替代 section 做栏目分区（如把“产品介绍”整个包进 aside）——aside 不代表“次要栏目”，它根本不是栏目容器。
• 在没有明确主题的布局区块中硬加 section，再塞个 aside 充数——若内容无标题、无独立主题，优先用 div，别滥用语义标签。
• 把主导航、页脚链接放进 aside——它们属于 nav 和 footer，语义不可混用。

实际嵌套写法示意

正确结构示例（局部关联）：

<section><h2>咖啡萃取原理</h2>
  <p>水温、粉水比与接触时间共同影响风味…</p>
  <aside><h3>小知识</h3>
    <p>意式浓缩的理想萃取时间为 25–30 秒。</p>
  </aside></section>

正确结构示例（全页级）：

<main><section><h2>手冲教程</h2></section><section><h2>器具评测</h2></section></main><aside><h2>本周豆单推荐</h2>
  <ul><li>埃塞俄比亚 耶加雪菲</li></ul></aside>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！