该用 <article> 当内容能独立存在（如RSS订阅、社交转发），否则用 <section>；<article> 需含标题、作者、时间等元信息，<section> 必须有 <h2>–<h6> 标题且不可无意义嵌套。
什么时候该用 <article> 而不是 <section>
核心判断看内容能否“独立存在”：<article> 必须能单独被 RSS 订阅、被社交平台转发、或脱离当前页面仍语义完整；<section> 是同一主题下的逻辑分块，不能脱离上下文独立成立。
常见误用现象：把整篇博客正文包在 <section> 里——它该是 <article>；把 FAQ 列表整个塞进 <article>——它没独立作者、发布时间、可分发性，该用 <section>。
-
<article>内部通常包含<header>（含<h1>或<h2>）、作者信息、发布日期、<footer>（如版权、标签） -
<section>可以嵌套在<article>内（比如「代码实现」「调试技巧」两节），但反过来不行 - 一个页面可以有多个
<article>（如新闻列表页），但每个<article>应有唯一标识（如id或itemprop="mainEntity"）
<section> 必须配 <h2>–<h6> 否则无效
W3C 明确要求：<section> 没标题 = 语义断裂。爬虫会直接忽略其结构作用，相当于白写。
错误示例：<section><p>这是功能说明</p></section> —— 没标题，搜索引擎不认为这是个“区块”，只当普通段落处理。
立即学习“前端免费学习笔记（深入）”；
- 标题必须是
<h2>–<h6>，不能用<div class="title">或<p>模拟 - 层级要连贯：父级用
<h2>，子<section>就该用<h3>；跳到<h5>会让爬虫困惑归属关系 - 允许占位标题：内容暂无文字标题时，补上简明
<h3>技术细节</h3>比留空强
嵌套深度超过 3 层会触发 Google “结构噪声”惩罚
实测数据显示：连续嵌套 <section><section><section> 时，关键词密度识别准确率下降约 22%。Google 的解析器会把它当成“结构干扰项”，降低该区块权重。
典型陷阱：用 <section> 包导航栏 → 再包搜索框 → 再包筛选条件，三层纯样式容器全打上 <section> —— 这不是语义分块，是滥用。
- 纯布局/样式容器一律用
<div>，哪怕加了背景色、边距、flex 布局 -
<section>只用于有明确主题 + 标题的内容块，如「用户评价」「参数对比」「常见问题」 - 检查 DOM：删掉
<section>标签后，里面内容是否还能自然嵌入上下文？能，大概率不该用
<article> 和 <section> 混用时的 SEO 权重分配
Google 会基于语义标签推断内容主次：<article> 内容默认获得更高主题权重；<section> 内容被视为辅助解释，权重向下收敛。
例如一篇教程页：<article> 包裹全文（含标题、作者、正文），内部用 <section> 分「环境配置」「代码示例」「报错排查」——搜索引擎会把整篇当一个实体索引，各 <section> 的关键词自动绑定到主主题下。
- 不要把不同主题的内容硬塞进同一个
<article>（如把「产品介绍」和「客户案例」拼在一起） - 多个
<article>并列时（如首页文章流），确保每篇都有独立<h1>或<h2>，避免标题重复 -
<section>内部若含独立可分发内容（如某条评论），应改用<article>，哪怕只是嵌套一层
