必须用 aside 而不是 nav，因为广告是附属信息而非导航；nav 仅适用于可操作的链接集合，误用会误导屏幕阅读器；aside 明确支持广告用例，且需与 main 或 article 并列、dom 后置，语义核心在于与主内容的关系。

aside 是唯一符合语义的标签，不是 nav，也不是 section 或 div。

为什么必须用 aside 而不是 nav

nav 只适用于导航链接集合，比如“分类目录”“用户中心”“返回顶部”这类跳转行为；广告不提供页面内导航功能，也不表达网站结构意图。用 nav 包裹广告，会误导屏幕阅读器认为这是可操作的导航区，实际点击无效，反而降低可访问性。

常见错误现象：aria-label="广告导航" 这类写法毫无意义，nav 的语义和 aria 标签都要求内容具备导航能力。

Article To Html

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

下载

• 广告内容本质是附属信息：与主文相关（如文章讲 React，侧边推 React 课程），但可独立存在或移除
• aside 的规范定义明确包含“广告”这一典型用例（HTML5 官方说明及 WAI-ARIA 实践指南均列出）
• 搜索引擎和读屏软件识别 aside 后，会自然降权处理，不干扰主内容权重

aside 的正确嵌套位置和边界

不能把整个侧边栏容器都写成 aside，尤其当它混有导航菜单时——这会污染语义。真实页面中，侧边栏常含多类内容，应按职责拆分：

• 纯广告区块 → 单独用 aside，加 role="complementary"（可选，增强旧版辅助工具兼容）
• 导航链接列表 → 必须用 nav，且带 aria-label，例如 <nav aria-label="文章分类"></nav>
• 作者简介、标签云、延伸阅读 → 也属于 aside 的合理范围
• 避免在 header 或 footer 内部使用 aside：它只适用于与 main 或 article 并列的上下文

CSS 布局不影响语义，但会影响 aside 的有效性

用 Flexbox 或 Grid 把 aside 固定在右侧，没问题；但若因 CSS 导致它在 DOM 顺序中出现在 main 之前，且视觉上又压盖主内容，则可能被读屏软件误判为“前置干扰”。关键点：

• aside 应尽量放在 main 同级、后置位置（DOM 顺序靠后），再用 CSS 移动显示位置
• 不要用 position: absolute + z-index 把 aside 盖在 main 上——这破坏可访问流，键盘焦点可能跳过它
• 小屏幕建议用 @media 隐藏 aside 或转为折叠面板，而不是强行压缩宽度导致文字溢出

最易被忽略的一点：aside 不等于“右边那块区域”，它的语义锚点是「与当前 article 或 main 的关系」。如果广告是全站通用、与当前页面内容完全无关（比如首页弹窗推广游戏下载），那它甚至不该放在 aside 里，而该用 dialog 或独立 section + aria-live 控制。语义从来不是贴标签，而是回答“它对这个页面意味着什么”。

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