SEO场景下HTML <section>与<article>标签正确用法及页面结构咨询

数据老陈

2026-10-4

核心语义先明确

<article>：代表独立、完整的内容块，单独抽离出来也可以正常阅读（比如单篇新闻、单篇博客）
<section>：代表同一主题的内容分组，通常用来拆分一篇长文章里的不同章节，每个section都对应一个独立的子主题

你给出的两种写法都不符合语义规范

第一种问题：文章标题属于正文内容的一部分，放在<article>外面逻辑不通
第二种问题：文章正文段落放在<article>外面，导致<article>里只有标题，失去了「独立完整内容」的语义

正确写法参考

场景1：单篇短文章，不需要拆分章节

<!-- 全局站点头部：放logo、导航、站点搜索等公共内容，所有页面通用，放在body下最顶部即可 -->
<header>
  <a href="/">站点logo</a>
  <nav>导航菜单</nav>
</header>

<!-- 单篇文章完整内容直接用article包裹 -->
<article>
  <!-- 文章自身的头部：放标题、发布时间、作者信息等 -->
  <header>
    <h1>文章标题</h1>
    <p>发布时间：2024-01-01 作者：xxx</p>
  </header>
  <!-- 所有正文内容都放在article内部 -->
  <p>文章正文第一段</p>
  <p>文章正文第二段</p>
</article>

<!-- 全局页脚：放备案信息、联系方式等公共内容 -->
<footer>
  <p>站点备案号xxx</p>
</footer>

场景2：长文章需要拆分多个章节

<header>
  <a href="/">站点logo</a>
  <nav>导航菜单</nav>
</header>

<article>
  <header>
    <h1>长文章总标题</h1>
    <p>发布时间：2024-01-01 作者：xxx</p>
  </header>
  <!-- 每个独立章节用section分组 -->
  <section>
    <h2>章节1标题</h2>
    <p>章节1正文</p>
  </section>
  <section>
    <h2>章节2标题</h2>
    <p>章节2正文</p>
  </section>
</article>

<footer>
  <p>站点备案号xxx</p>
</footer>