article是独立可复用的内容实体，需满足作者/时间/rss推送等条件；section是依赖上下文的主题分组，必须带标题；无法独立理解的内容用div。
本质区别就一句话：article 是能“拎出来就用”的内容，section 是“离不开上下文”的分组。
article 的核心是独立可复用
它不是普通区块，而是自带身份的内容实体。只要满足以下任一条件，基本就该用 article：
- 内容有明确作者、发布时间（比如含
<time datetime></time>），且可能被 RSS 抓取或邮件推送 - 同一页面里并列多条同类内容，比如博客列表页的每篇博文、新闻聚合页的每条快讯
- 会被第三方调用——嵌入到其他站点、PWA 离线缓存单篇、CMS 接口导出某条评论
- 内部用了
<header><h1></h1></header>和<footer></footer>，且这些元素描述的是它自己，不是父容器
例如：用户评论区里每条评论都该是 article，因为它有作者、时间、可被单独转发；而整篇博客正文本身，也必须用 article 包裹，而不是 section 或 div。
section 的关键是主题性分组
它不追求独立，只负责把有关联的内容归拢在一起，并且必须带标题。没有 h2–h6 的 section，语义上等于 div。
- 适合划分一篇长文里的逻辑小节，如「安装步骤」「配置说明」「排错指南」，每个都配一个
<h2></h2> - 可用于产品页中「参数详情」「用户评价」「相关推荐」这类服务于同一上层主题（本商品）的模块
- 不能用来包导航栏、页脚、侧边栏——这些已有 nav、footer、aside 等更精确标签
- 也不该只为加 margin 或背景色硬套一层，那只是视觉需求，用 div + class 更诚实
嵌套关系要讲逻辑，不是越深越好
article 可以包含多个 section，比如一篇教程按步骤拆成几个子块；section 也可以包含多个 article，比如首页的「热门文章」区域。
- article 内部嵌套 section 是合理的，前提是每个 section 有明确子主题和对应标题
- section 里只包一个 article，且没额外包装意图，属于冗余——直接用 article 即可
- 避免 article 套 section 再套 article 这类三层以上嵌套，结构信号容易模糊，读屏软件和爬虫都难识别
- 嵌套时注意 header/footer 归属：内层 article 的 header 描述的是它自己，不是外层的
判断方法很实在：剪下来能看懂吗？
写代码前花三秒问自己：把这段 HTML 复制粘贴到新文件里打开，别人能不能看懂？要不要回头找上下文？
- 能独立看懂、有完整意义 → article
- 看得懂但缺不了当前页面背景，且有明确主题 → section
- 既看不懂又没主题 → div，别硬塞语义标签
拼写必须小写，DOCTYPE 必须声明，否则语义直接失效。浏览器不报错，但无障碍工具和搜索引擎会当它不存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
