语义化标签需按内容角色而非样式选用：article用于可独立分发的内容单元，section用于同主题逻辑分组，aside用于非核心补充信息，nav专用于导航链接集合。
语义化标签不是“贴标签”，而是让结构真正反映内容关系。用错 article、section、aside、nav，不仅影响可访问性，还会误导搜索引擎和屏幕阅读器。关键看内容是否独立、是否从属、是否附属、是否导航——不是看它“长什么样”，而是看它“是什么角色”。
article：能单独被分发、重用或订阅的内容块
它代表一个自我完整的、可独立存在的内容单元。比如一篇博客正文、一条新闻、一个用户评论、一个产品卡片（当它本身是信息主体时）。
- ✅ 正确：整篇技术文章、知乎专栏单篇文章、微博的一条原创动态（含文字+配图+发布时间）
- ❌ 错误：文章里的小标题段落、侧边栏推荐列表、页脚版权信息——它们不构成独立内容
- ? 提示：
article可以嵌套（如评论区里每条评论都是article），但不要因为“看起来像卡片”就滥用；如果删掉它，页面主信息仍完整，那它大概率不该是article
section：有共同主题的一组内容，但不具备独立传播意义
section 是逻辑分组容器，强调“这一块讲的是同一件事”，但不能脱离上下文存在。它比 div 更有意义，但比 article 更弱。
- ✅ 正确：博客文章里的“背景介绍”“实现步骤”“注意事项”三个区块；商品页的“参数详情”“用户评价”“售后政策”
- ❌ 错误：仅用来布局（如“左边菜单栏”“右边广告位”）；没有标题的纯样式分组
- ? 提示：每个
section最好带–
div
aside：与主内容相关但非核心的补充信息
aside 不是“边栏容器”，而是“旁白式内容”。它可以出现在页面任意位置（不限于右侧），只要它的作用是注释、延伸、补充或附属说明。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：文章中插入的术语解释框、法律声明弹窗、作者简介侧边卡、当前页面相关的参考资料链接列表
- ❌ 错误：主导航菜单、页脚导航、广告横幅（除非广告明确关联本文主题，如“本文提到的工具官网”）
- ? 提示：把
aside拿走，主内容依然自洽完整；如果拿走后读者理解受阻，那它其实该是section或正文一部分
nav：专门承载导航链接的区域
nav 只关心“这是不是一组跳转入口”，不关心位置或样式。一个页面可以有多个 nav，只要它们各自承担明确导航职责。
- ✅ 正确：顶部主导航栏、面包屑导航、文章末尾的“上一篇/下一篇”、页脚的站点地图链接组
- ❌ 错误：搜索框（不是链接）、登录按钮、筛选条件按钮（无 href）、纯装饰性图标组
- ? 提示：不是所有链接集合都要用
nav；只有当这组链接服务于“全局或主要路径导航”时才适用。例如文章内几个锚点链接，用nav就过重，用普通列表更合适
语义不是装饰，是结构契约。用对标签，等于给机器读得懂的说明书——对 SEO、无障碍、维护性都有实际好处。不复杂，但容易忽略。
