section、article、nav 是分工明确、层级清晰的语义结构元素：nav 负责导航路径，article 承载独立自包含内容，section 按主题划分逻辑区块，三者协同构建语义化页面骨架。
section、article、nav 不是并列的“装饰性容器”，而是分工明确、层级清晰的结构搭档。 它们共同构建页面骨架，各自承担不可替代的角色：nav 负责“怎么去”，article 定义“什么是主内容”，section 则回答“这部分讲什么”。用错一个，整个语义链就容易断裂。
nav：只管“路标”，不管“目的地”
nav 的唯一职责是包裹主要导航路径，比如顶部菜单、侧边目录、文章分页。它不承载内容本身，只说明“这里有一组跳转入口”。
- 适合放进 nav 的：首页 / 归档 / 关于我们 / 分类列表 / 上一篇/下一篇
- 不该放进 nav 的：页脚的“隐私协议”链接、文章末尾的“点赞”按钮、正文里的一句“参见附录”
- 一个页面可以有多个 nav（如顶部主导航 + 侧边栏目导航），但每个 nav 都应有明确的导航意图
article：自带“身份证”的独立内容单元
article 表示一段能单独存在、被引用、被分发的内容。它不是样式盒子，而是一个有完整语义身份的信息实体。
- 典型场景：一篇博客正文、一条新闻稿、一个论坛帖子、一组用户评论（可嵌套子 article）
- 关键判断标准：删掉它，页面主信息依然成立；把它复制到 RSS 或邮件中，读者仍能理解上下文
- 不能塞广告位、推荐栏或无关侧边信息——这些破坏它的“自包含”属性
section：按主题切分内容的逻辑区块
section 是有标题、有主题、有内在一致性的内容集合。它不像 div 那样中性，也不像 article 那样强调独立性，而是强调“这一块在讲同一件事”。
- 必须配 h1–h6 标题（否则语义弱化，易被误用为 div 替代品）
- 常见用途：文章的“引言”“方法论”“结论”章节；产品页的“参数”“评价”“售后”模块
- article 内部可用 section 组织子结构（如一篇教程分“准备”“步骤”“注意事项”），但 section 里不能随便套 article——除非该 section 下真有多个独立内容项
三者如何真正协同？以博客列表页为例
一个典型结构是：nav 提供分类筛选入口 → main 包裹整页主体 → 每个 article 是一篇博文 → article 内部用 section 划分“摘要”“正文”“作者信息” → 页面底部另有一个 nav 做分页。它们不是堆叠关系，而是“导航定位 → 主体承载 → 内容封装 → 主题分层”的协作链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
