选 article 还是 section，关键在于内容能否独立传播：能单独转发、被rss抓取、脱离页面仍完整易懂的用 article；仅作为页面内主题分组、抽离上下文即失效的用 section。

选 section 还是 article，关键不在视觉样式，而在于内容能不能“剪下来发微信朋友圈，别人一看就懂”。能——用 article；不能——用 section。

article：能单独存在、被转发、被RSS抓取的内容

它不是“看起来像一篇文章”，而是真正具备独立传播能力的内容单元：

• 博客正文、新闻稿、论坛主帖、用户评论（含作者+时间+正文）
• 产品卡片如果带标题、描述、价格、操作按钮，且设计上支持弹窗复用或侧栏展示，也适合用 article
• 必须有明确的语义闭环：建议包裹 <header><h1>标题</h1></header>，可加 <time></time> 和 <footer></footer>
• 搜索引擎会把它当作独立索引项，RSS 解析器只认它——用错就等于内容隐身

section：离不开当前页面的主题分组

它不生产内容，只组织内容。抽离上下文后只剩半句话，就是 section 的典型特征：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

• 博客正文里的「背景」「方法」「结论」小节（每节需带 <h2></h2> 或更高级别标题）
• 电商页的「规格参数」「用户评价」「售后政策」三个并列模块
• 首页「相关推荐」外层容器（里面每篇推荐仍是 article）
• 没标题的 section 在无障碍树里直接消失，Chrome DevTools 的 Accessibility 面板里看不到它

嵌套不是自由发挥，而是语义流向

结构要反映真实内容关系：

• ✅ 合理：<article></article> 里嵌多个 <section></section>（一篇教程分章节）
• ✅ 合理：<section></section> 里并列多个 <article></article>（如「最新动态」板块下三条新闻）
• ❌ 错误：<section></section> 包着 <main></main>，或整页最外层硬套一个 <section></section>
• ❌ 错误：用 <section></section> 包导航栏、轮播图外层、页脚——它们该用 <nav></nav>、<div>、<code><footer></footer>

  拿不准时，做一次“剪贴测试”

  复制你打算包裹的 HTML 片段，新建空白 HTML 文件，只放这段内容，打开看：

  • 能独立表达完整意思、有标题/作者/时间、转发也不迷糊 → 用 article
  • 脱离当前页就只剩“安装步骤”四个字，或“用户说……”半句话 → 用 section
  • 既不独立、又无明确主题（比如纯轮播容器、Grid 布局父层）→ 老实用 <div> </div>