正确使用 article 和 section 能提升搜索引擎与屏幕阅读器对内容结构的理解：article 表示可独立存在、自带标题与元信息的完整内容单元；section 表示依赖上下文、必须带标题的主题子块；二者需配合 main 容器与连续标题层级，并结合 Schema.org 标记增强语义表达。
用对 article 和 section，不是为了“符合标准”，而是让搜索引擎和屏幕阅读器真正理解你的内容结构。关键不在标签本身，而在你赋予它的语义是否真实、准确。
article：能单独存在、被转发、被订阅的内容
它代表一个完整的信息单元，脱离当前页面仍可读、可引用、可聚合。比如一篇博客正文、一条新闻稿、一个用户评论、一个产品详情页主体。
- 必须自带上下文：至少包含标题（h1–h6）、发布时间或作者等信息
- 可独立嵌套：内部可含 header、footer、section，甚至再嵌套 article（如主文章下的用户评论）
- 首页的“推荐文章”列表，每篇都该用 article 包裹，而不是只在外层套一个 div 或 section
section：同一主题下的逻辑子块，不能脱离上下文独立成立
它是对主内容的分节处理，强调关联性与标题引导。比如教程里的“安装步骤”“配置说明”，产品页中的“参数规格”“用户评价”“售后政策”。
- 每个 section 必须有且仅有一个标题（h2–h6），文字需真实反映该块主题
- 不强调独立性：拿掉周围内容后，section 本身通常无法自洽表达完整意思
- 避免无标题、无主题关联的堆砌——十几个空 section 会稀释页面可信度
嵌套与层级：main 是容器，article 和 section 是内容单元
整个页面只能有一个 main，它应包裹核心内容区域，不能出现在 header、footer、nav 等中。article 可在 main 内，也可独立存在（如 RSS 源）；section 通常放在 main 或 article 内部。
立即学习“前端免费学习笔记（深入）”；
- article 内部可用多个 section 划分小节，但不宜超过三层嵌套
- 不要用 section 包裹侧边栏、广告位、版权声明——这些更适合 div 或 aside
- 标题层级必须连续：article 主标题用 h2，其内 section 小节用 h3，跳过 h3 直接 h4 会干扰结构识别
搭配 Schema.org 标记，把语义信号落到实处
光靠 HTML5 标签只是基础。加上结构化数据，才能触发搜索结果中的富摘要（如发布时间、作者、星级评分）。
- article 推荐加 Article 或 BlogPosting 类型标记
- section 若承载关键信息（如 FAQ、步骤指南），可配合 FAQPage 或 HowTo
- 用 Google Rich Results Test 工具验证标记是否被正确识别
