aside 与 section

aside 与 section 都是分区元素，用途不同：一个放相关但可剥离的内容，一个按主题给内容分组^[1][2]。规范对 <section> 的提醒很直接，它只是样式容器时应该用 <div>^[2]。

aside 的常见位置

侧边栏、相关链接、引用出处、广告位、作者介绍是典型场景。判断方法是把这块内容删掉，正文是否仍然完整；仍然完整说明可以放进 <aside>^[1]。它自动形成 complementary 地标^[3]。

section 要有名字

<section> 只有在带可访问名称时才对读屏用户有用，做法是给它一个 <h2> 或写 aria-label^[2]。带名字的 <section> 形成 region 地标，没名字的普通分组不会产生地标价值^[3]。整页地标数量建议控制在 7 个以内^[3]。

与标题层级的配合

标题层级决定文档大纲怎么读，标签本身不改变六级标题之间的等级^[2]。分节套多层时仍要按主题顺序排标题，机器读的是标题序列与文本位置。

与搜索的关系

正文与侧边内容混在一块容器里时，页面主题的范围变模糊。搜索系统判断相关性看的是整页内容与结构，<aside> 的语义提示属于结构信号之一，权重远不如文字本身^[4]。

广告位与推荐位若含外链，是否传权重由链接属性决定，不由放在 <aside> 里决定^[5]。

常见误用

第一种是把每个 <div> 换成 <section>，页面出现十几个无名分节。第二种是把商品参数表放进 <aside>，那本是主体内容。第三种是侧栏每页重复同样的推荐块，页面独有能力被稀释^[4]。

附录

参见

• 语义化标签
• main 与 article
• header 与 footer
• 标题层级
• 导航
• ARIA

参考资料

官方（境外）

1. 《<aside>：附属内容元素》，MDN Web 文档。
2. 《<section>：通用分节元素》，MDN Web 文档。
3. 《Landmarks Pattern》，W3C WAI-ARIA Authoring Practices Guide。
4. 《创建实用、可靠、以用户为中心的内容》，Google 搜索中心。
5. 《向 Google 说明您的出站链接的用意》，Google 搜索中心。

外部链接

• HTML 标准：分区与标题，WHATWG。