article 表示可独立分发或复用的自包含内容单元，如博客、新闻；section 仅为依赖上下文的主题分组，如“产品特性”。必须用 article 的情形包括：含作者与时间且需 RSS 抓取、同一页面多条同类独立内容、会被第三方聚合、使用 header+h1+footer 描述本体。

article 和 section 的语义边界在哪

关键看内容是否「可独立分发或复用」。article 表示一个自包含、可单独存在、能脱离上下文被引用或重用的内容单元，比如一篇博客、一条新闻、一个用户评论；section 只是文档中一个主题性的分组，依赖上下文才有完整意义，比如「产品特性」「客户评价」这类页面内的逻辑区块。

什么时候必须用 article 而不是 section

以下情况应优先选 article：

• 内容有明确作者、发布时间（如 ），且可能被 RSS 抓取或单独分享
• 同一页面内有多条同类独立内容（如博客列表页中每篇博文都该是 ）
• 内容会被第三方聚合（如嵌入到聚合平台、邮件简报、PWA 离线缓存中）
• 使用了
  +
  + 组合，且该组合描述的是本体而非父容器

section 常见误用场景

开发者常把「视觉上有边框/背景的区域」直接套 section，这是错的。它不解决样式问题，只表达结构关系。容易踩的坑包括：

• 仅因 CSS 需要加 class 就用 section 包裹 —— 应改用 或语义更准的标签（如 aside、nav）
• 在 article 内部又用 section 包裹标题+段落，但没提供新主题层级 —— 此时用
  或直接用 heading 更合适
• section 没配
  ～
  标题 —— 它本身不自带语义标题，缺标题就失去「主题分组」意义

嵌套规则与实际写法示例

article 可以包含 section（如一篇教程里分「准备」「实操」「排错」几节），但 section 不该包裹多个无关联的 article —— 那该用

或 作为容器。

  
    

      
如何调试 fetch 请求
      2025年3月15日
    
    

      
常见错误码
      
401 表示未认证…
    
    

      
浏览器 DevTools 技巧
      
Network 标签页过滤 XHR…
    
  

真正难判断的，往往不是单个标签用法，而是整页信息架构是否支持这种嵌套 —— 如果你不确定某个区块该用 section 还是 article，先问自己：它摘出来发到 Twitter 或转发给同事，别人能不能看懂？不能，就不是 article。