section与article的区别与使用场景

H5中的<section>和<article>都是用于文档结构化的语义化标签，但它们有不同的用途。下面我将详细解释它们的区别、使用场景以及如何避免混淆。

如何区分？

关键问题：这段内容在脱离上下文后是否还有意义？

如果一段内容可以被单独拆分并在其他网站或平台上使用，那么它很可能是一个<article>。
如果一段内容只是文档中的一个部分，它和文档的其他部分共同组成一个整体，那么它可能是一个<section>。

另外，<article>内部可以有多个<section>，而<section>内部也可以有多个<article>。这取决于你的内容结构。

代码示例

示例1：博客文章页面

html 复制代码

<article>
  <header>
    <h1>博客文章标题</h1>
    <p>发布日期：<time datetime="2023-10-01">2023年10月1日</time></p>
  </header>
  <section>
    <h2>引言</h2>
    <p>这是文章的引言部分。</p>
  </section>
  <section>
    <h2>第一章</h2>
    <p>第一章的内容。</p>
  </section>
  <section>
    <h2>第二章</h2>
    <p>第二章的内容。</p>
  </section>
  <footer>
    <p>文章标签：HTML，语义化</p>
  </footer>
</article>

示例2：新闻网站首页

html 复制代码

<main>
  <section>
    <h2>国内新闻</h2>
    <article>
      <h3>新闻标题1</h3>
      <p>新闻摘要1</p>
    </article>
    <article>
      <h3>新闻标题2</h3>
      <p>新闻摘要2</p>
    </article>
  </section>
  <section>
    <h2>国际新闻</h2>
    <article>
      <h3>新闻标题3</h3>
      <p>新闻摘要3</p>
    </article>
  </section>
</main>

容易混淆的情况

一个独立的、可重用的内容块，但不是一个完整的文章？

例如：一个用户评论。虽然它可能不长，但它是一个独立的内容单元，应该用<article>。
注意：<article>不一定很长，只要它是独立的。

注意

对于<sectio>,规范建议包含一个标题。但如果你不想显示标题，也可以使用隐藏标题（例如用CSS隐藏)。
对于<article>，虽然标题不是强制的，但最好包含一个标题（可以是隐式的，通过aria-label等属性描述）。

总结

<article>是一个独立的整体，内部包含这个整体中的各个部分，如：<header>、<footer>。<section>就是这个整体中的一个部分。