<aside>标签不是广告容器，它语义上表示与主内容相关但可独立存在的旁注，如术语解释或作者简介；用于广告会误导屏幕阅读器、削弱SEO、引发误拦截。
aside 标签不是广告容器，别乱用
HTML 的 <aside> 本质是“与主内容相关但可独立存在的旁注”，比如侧边栏的术语解释、作者简介、引用来源——它和广告没有语义绑定。强行把广告塞进 <aside>，既误导屏幕阅读器，也削弱 SEO 可读性，还可能被广告拦截插件误伤。
- 浏览器不会因为用了
<aside>就跳过广告过滤逻辑 - 搜索引擎更关注内容相关性，而非标签名；
<aside>里堆满推广链接反而拉低页面可信度 - 无障碍工具会把
<aside>内容当作辅助信息朗读，用户听到一堆“点击领取优惠”容易困惑
广告位该用什么 HTML 标签
没标准“广告标签”，但有更稳妥的语义选择：
- 纯展示型横幅（如页头 banner）：用
<section>+aria-label="广告"，明确告知辅助技术这是广告区域 - 嵌入正文中的推广卡片：用
<div role="complementary">，比<aside>更贴近“补充性内容”的定位 - 需要 JS 动态加载的广告位：优先用
<div class="ad-slot">，靠 class 和 ARIA 控制行为，不强求语义标签 - 避免用
<nav>、<footer>或<header>包裹广告，除非它真属于那个区域的结构性功能
怎么让广告不被误判为正文内容
关键不在标签名，而在显式声明意图和隔离结构：
- 给广告容器加
aria-hidden="true"（仅当它完全无交互、纯视觉装饰时） - 更推荐加
role="banner"或role="application"并配aria-label，例如：<div role="banner" aria-label="合作伙伴推广位"> - 确保广告区块与正文之间有清晰的视觉/语义分隔：用
<hr>、外边距、或aria-labelledby指向独立标题 - 不要在广告内放
<h2>~<h6>等语义标题，除非它真是该广告活动的主标题（且需用aria-level修正层级）
实际项目中容易踩的坑
很多团队在改版时顺手把旧广告 div 换成 <aside>，以为“更语义化”，结果埋下兼容性雷：
立即学习“前端免费学习笔记（深入）”；
- CSS 重置样式可能对
<aside>有默认 margin/padding，导致布局偏移 - 某些 SSR 框架（如 Next.js）的预渲染逻辑会把
<aside>当作重要内容提前 hydrate，拖慢首屏 - 广告平台返回的脚本常依赖父容器 ID 或 class，换标签后 JS 找不到挂载点，直接白屏
- 用
<aside>包裹多个广告单元（如“推荐位+赞助商+底部横幅”），语义混乱，审查工具报ARIA role must be appropriate
真正要区分广告和正文，靠的是结构意图的显式表达，不是换一个听着高级的标签名。标签只是骨架，ARIA 和上下文才是判断依据。
