17370845950

语义化标签需按内容角色而非样式选用：article用于可独立分发的内容单元，section用于同主题逻辑分组，aside用于非核心补充信息，nav专用于导航链接集合。

语义化标签不是“贴标签”，而是让结构真正反映内容关系。用错 article、section、aside、nav，不仅影响可访问性，还会误导搜索引擎和屏幕阅读器。关键看内容是否独立、是否从属、是否附属、是否导航——不是看它“长什么样”，而是看它“是什么角色”。

article：能单独被分发、重用或订阅的内容块

它代表一个自我完整的、可独立存在的内容单元。比如一篇博客正文、一条新闻、一个用户评论、一个产品卡片（当它本身是信息主体时）。

• ✅ 正确：整篇技术文章、知乎专栏单篇文章、微博的一条原创动态（含文字+配图+发布时间）
• ❌ 错误：文章里的小标题段落、侧边栏推荐列表、页脚版权信息——它们不构成独立内容
• ? 提示：article 可以嵌套（如评论区里每条评论都是 article），但不要因为“看起来像卡片”就滥用；如果删掉它，页面主信息仍完整，那它大概率不该是 article

section：有共同主题的一组内容，但不具备独立传播意义

section 是逻辑分组容器，强调“这一块讲的是同一件事”，但不能脱离上下文存在。它比 d

• ✅ 正确：博客文章里的“背景介绍”“实现步骤”“注意事项”三个区块；商品页的“参数详情”“用户评价”“售后政策”
• ❌ 错误：仅用来布局（如“左边菜单栏”“右边广告位”）；没有标题的纯样式分组
• ? 提示：每个 section 最好带

  –

  标题，否则语义会模糊；如果一组内容连标题都不好起，可能更适合用 div

aside：与主内容相关但非核心的补充信息

aside 不是“边栏容器”，而是“旁白式内容”。它可以出现在页面任意位置（不限于右侧），只要它的作用是注释、延伸、补充或附属说明。

• ✅ 正确：文章中插入的术语解释框、法律声明弹窗、作者简介侧边卡、当前页面相关的参考资料链接列表
• ❌ 错误：主导航菜单、页脚导航、广告横幅（除非广告明确关联本文主题，如“本文提到的工具官网”）
• ? 提示：把 aside 拿走，主内容依然自洽完整；如果拿走后读者理解受阻，那它其实该是 section 或正文一部分

nav：专门承载导航链接的区域

nav 只关心“这是不是一组跳转入口”，不关心位置或样式。一个页面可以有多个 nav，只要它们各自承担明确导航职责。

• ✅ 正确：顶部主导航栏、面包屑导航、文章末尾的“上一篇/下一篇”、页脚的站点地图链接组
• ❌ 错误：搜索框（不是链接）、登录按钮、筛选条件按钮（无 href）、纯装饰性图标组
• ? 提示：不是所有链接集合都要用 nav；只有当这组链接服务于“全局或主要路径导航”时才适用。例如文章内几个锚点链接，用 nav 就过重，用普通列表更合适

语义不是装饰，是结构契约。用对标签，等于给机器读得懂的说明书——对 SEO、无障碍、维护性都有实际好处。不复杂，但容易忽略。