Seções e artigos: section e article

No HTML semântico, <section> e <article> são duas tags poderosas para organizar o conteúdo principal da sua página. Elas ajudam a dividir o <body> ou o <main> em partes lógicas e significativas.

Embora ambas sejam usadas para agrupar conteúdo, elas têm propósitos ligeiramente diferentes. Entender essa distinção é fundamental para construir uma estrutura HTML robusta e acessível.

A tag <section>: um agrupamento temático

A tag <section> representa uma seção genérica de conteúdo tematicamente agrupado. Pense nela como um "capítulo" ou uma "seção" dentro de um livro ou documento.

Características principais:

• Agrupamento temático: O conteúdo dentro de uma <section> deve estar relacionado a um tema específico.
• Geralmente com um título: Uma boa prática é que cada <section> tenha um título (<h1> a <h6>) que descreva o seu tema.
• Não é um contêiner genérico: Não use <section> apenas para estilização, como faria com uma <div>. Se o agrupamento não tem um tema claro, use <div>.

Exemplos de uso de <section>:

• Uma seção "Sobre Nós" em uma página inicial.
• Uma seção "Nossos Serviços" ou "Portfólio".
• Capítulos de um livro online.
• Uma seção de comentários em um post de blog.

<main>
  <section>
    <h2>Sobre Nós</h2>
    <p>Somos uma empresa dedicada a...</p>
    <p>Nossa missão é...</p>
  </section>

  <section>
    <h2>Nossos Serviços</h2>
    <ul>
      <li>Desenvolvimento Web</li>
      <li>Design UX/UI</li>
      <li>Consultoria</li>
    </ul>
  </section>
</main>

<section> pode ser aninhada?

Sim! Você pode ter <section>s dentro de outras <section>s, criando uma hierarquia de conteúdo.

<section>
  <h1>Capítulo 1: Introdução</h1>
  <p>Texto introdutório...</p>

  <section>
    <h2>1.1 História</h2>
    <p>A história começa em...</p>
  </section>

  <section>
    <h2>1.2 Conceitos Fundamentais</h2>
    <p>Os conceitos são...</p>
  </section>
</section>

A tag <article>: um conteúdo independente e auto-contido

A tag <article> representa um conteúdo independente e auto-contido que pode ser distribuído ou reutilizado independentemente do resto da página. Pense nela como um "artigo de jornal", um "post de blog", um "comentário de usuário" ou um "widget".

Características principais:

• Independente: O conteúdo dentro de um <article> deve fazer sentido por si só, mesmo que seja retirado do contexto da página.
• Auto-contido: Deve conter tudo o que é necessário para ser compreendido (título, autor, data, conteúdo principal).
• Geralmente com um título: Assim como <section>, um <article> deve ter um título (<h1> a <h6>).

Exemplos de uso de <article>:

• Um post de blog.
• Uma notícia em um site de notícias.
• Um comentário de usuário em um fórum.
• Um item de um feed de notícias.
• Um widget de previsão do tempo.

<main>
  <article>
    <header>
      <h2>Título do Post do Blog</h2>
      <p>Publicado por Maria em <time datetime="2026-05-28">28 de maio de 2026</time></p>
    </header>
    <p>Este é o conteúdo do meu post. Ele é independente e pode ser lido sozinho.</p>
    <footer>
      <p>Tags: HTML, Semântica</p>
    </footer>
  </article>

  <article>
    <h2>Comentário de Usuário</h2>
    <p>Por João em <time datetime="2026-05-27">27 de maio de 2026</time></p>
    <p>Ótimo post! Muito útil.</p>
  </article>
</main>

<article> pode ser aninhado?

Sim! Você pode ter <article>s aninhados. Por exemplo, um <article> principal para um post de blog, e dentro dele, <article>s para cada comentário.

<article>
  <h2>Post Principal</h2>
  <p>Conteúdo do post...</p>

  <section>
    <h3>Comentários</h3>
    <article>
      <h4>Comentário 1</h4>
      <p>Texto do comentário 1.</p>
    </article>
    <article>
      <h4>Comentário 2</h4>
      <p>Texto do comentário 2.</p>
    </article>
  </section>
</article>

<section> vs. <article>: qual usar?

A distinção pode ser sutil, mas é importante:

• <article>: Para conteúdo que pode ser distribuído e reutilizado independentemente. Pense em um item de um feed RSS. Se você pudesse pegar o conteúdo e publicá-lo em outro lugar e ele ainda fizesse sentido, é um <article>.
• <section>: Para agrupar conteúdo tematicamente relacionado dentro de um documento ou de um <article>. É uma divisão lógica de um documento.

Dica prática:

• Se o conteúdo tem um título e faz sentido por si só, provavelmente é um <article>.
• Se o conteúdo é um agrupamento temático dentro de um documento maior e geralmente tem um título, provavelmente é uma <section>.
• Um <article> pode conter <section>s (ex: um post de blog com seções "Introdução", "Desenvolvimento", "Conclusão").
• Uma <section> pode conter <article>s (ex: uma seção "Últimas Notícias" que lista vários <article>s de notícias).

Resumindo

• <section>:
  • Representa um agrupamento temático de conteúdo.
  • Geralmente tem um título.
  • Não é um contêiner genérico (use <div> para isso).
  • Pode ser aninhada.
• <article>:
  • Representa um conteúdo independente e auto-contido.
  • Pode ser distribuído e reutilizado separadamente.
  • Geralmente tem um título, autor e data.
  • Pode ser aninhado (ex: comentários dentro de um post).
• Ambas são tags semânticas de bloco que melhoram a acessibilidade, o SEO e a organização do código, dividindo o conteúdo principal em partes lógicas e significativas.