关键在内容能否独立存在：能单独理解、引用、rss抓取的用article，如博客正文、新闻条目；需依赖上下文的主题分组用section，如“规格参数”“用户评价”，且必须含h1–h6标题。
选 section 还是 article，关键不在“长得像不像区块”，而在于“这块内容离开当前页面，还能不能自己说话”。
能单独发微博就用 article
article 是自带身份证的内容单元——有标题、作者、时间，能被 RSS 抓取、被转发、被搜索引擎单独索引。它不是容器，而是内容实体。
- 一篇博客正文（含
<header><h1>标题</h1> <time>2026-06-15</time></header>）→ 必用 article - 新闻列表页里每条新闻摘要 → 每条都该是独立的 article
- 用户评论区里的每条评论 → 各自用 article，因为每条都可被引用、被回复、被推送
- 技术文章中嵌入的专家观点（带署名、出处、时间）→ 可嵌套为内层 article，前提是它本身可独立存在
需要上下文才说得清就用 section
section 表达的是“这一块在讲同一件事”，但它离不开当前页面。抽出来看，可能只剩半句话。
- 产品页的“规格参数”“用户评价”“售后政策”三个模块 → 各自用 section，每个必须配
<h2>规格参数</h2>这类标题 - 一篇教程内部的“准备环境”“执行步骤”“常见问题” → 每个子部分用 section，且标题层级要递进（如外层
<h2></h2>，内层<h3></h3>） - 首页的“最新动态”区域 → 若只是链接列表，无正文、无作者、无独立 URL，外层用 section 即可，里面每项别硬套 article
标题不是可选项，是语义开关
没有 <h1></h1>–<h6></h6> 的 section，在读屏软件和 Chrome 的 Accessibility 面板里根本不会被识别为逻辑单元——它和 div 没区别。
- 标题可以放在 section 任意位置，但必须在同一个标签内（
<section><p>说明文字</p> <h3>安装步骤</h3></section>合法） - 嵌套的 section 不能共用父级标题，每个都要有自己的层级标题
- 如果只是为了加边距或背景色，直接用
<div class="card"> 更准确，也更可控 <h3>嵌套不是越深越好，得看关系对不对</h3> <p>article 内部可以自然包含多个 section（比如一篇报告分“背景”“数据”“结论”），这是“整体—子主题”关系；但 section 里堆一堆 article，往往意味着外层标签选错了。</p> <ul> <li>✅ 合理：一个“技术分享”article 里，用 section 划分“原理”“代码”“测试结果”</li> <li>❌ 错误：“热门文章”section 下放 6 篇摘要，每篇都用 article 包着标题+链接 → 这些摘要没正文、没时间、不独立，外层该用 <code><main></main>或<div>，article 只给真正可分发的内容 <li>⚠️ 注意：嵌套层级深时，检查 DevTools 的 Accessibility 面板，确认 header/footer 归属是否清晰——内层 article 的 <code><header></header>描述的是它自己，不是外层
