Docs executáveis de HTML: Tag section

Para que serve a tag section

<section> agrupa conteúdo de um mesmo tema e começa com um título que dá nome a esse tema. Uma landing page dividida em "Recursos", "Preços" e "Perguntas frequentes" é o caso clássico:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sections</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    section { border: 2px solid #e5e7eb; border-radius: 8px; padding: 0 14px; margin-bottom: 10px; }
    section h2 { color: #2563eb; }
  </style>
</head>
<body>
  <h1>Acme Notes</h1>
  <section>
    <h2>Features</h2>
    <p>Sync, search and share your notes.</p>
  </section>
  <section>
    <h2>Pricing</h2>
    <p>Free for personal use.</p>
  </section>
  <section>
    <h2>FAQ</h2>
    <p>Answers to common questions.</p>
  </section>
</body>
</html>

Cada section é um capítulo da página, e cada título é uma linha do sumário da página. Como as outras tags semânticas, <section> não tem estilo padrão; as bordas vêm do CSS.

section vs article vs div

As três parecem iguais na tela. O que muda é o que elas dizem sobre o conteúdo:

Elemento	Significa	Teste
`<article>`	Uma peça completa e independente	Faria sentido publicada sozinha, em outro site ou num feed?
`<section>`	Uma parte temática de um todo maior	Tem (ou precisa de) um título, e é um capítulo de algo?
`<div>`	Nada: uma caixa de estilo ou layout	Está ali só por causa do CSS ou do JavaScript?

Posts de blog, comentários de fórum, notícias e cards de produto são articles. "Recursos", "Capítulo 2" e "Produtos relacionados" são sections. Uma linha flex que alinha três cards é uma div.

Articles dentro de uma section

Os dois se aninham nas duas direções. Aqui uma section "Últimos posts" contém vários articles independentes:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Section of articles</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .grid { display: flex; gap: 10px; }
    article { flex: 1; border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 12px; }
    article h3 { margin: 10px 0 4px; font-size: 16px; }
    article p { color: #6b7280; font-size: 14px; }
  </style>
</head>
<body>
  <section>
    <h2>Latest posts</h2>
    <div class="grid">
      <article>
        <h3>Flexbox in 5 minutes</h3>
        <p>Rows, columns and gaps.</p>
      </article>
      <article>
        <h3>CSS Grid basics</h3>
        <p>Two-dimensional layout.</p>
      </article>
      <article>
        <h3>Forms that work</h3>
        <p>Labels and validation.</p>
      </article>
    </div>
  </section>
</body>
</html>

Repare na <div class="grid">: ela existe só para colocar os cards em linha, então div é a tag certa para ela. Cada card é um article porque cada post se sustenta sozinho.

Sections dentro de um article

Um artigo longo pode ser dividido em sections, como os capítulos de um livro. Os níveis de título continuam a partir do título do próprio artigo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article with sections</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 2px solid #2563eb; border-radius: 8px; padding: 0 14px; }
    section { border-inline-start: 4px solid #16a34a; padding-inline-start: 10px; margin-bottom: 12px; }
    section h3 { margin: 4px 0; }
  </style>
</head>
<body>
  <article>
    <h2>A beginner's guide to bread</h2>
    <section>
      <h3>Ingredients</h3>
      <p>Flour, water, salt, yeast.</p>
    </section>
    <section>
      <h3>Method</h3>
      <p>Mix, knead, rise, bake.</p>
    </section>
  </article>
</body>
</html>

A caixa azul é o article (o guia inteiro), as barras verdes são as suas sections. Dê a uma section o seu próprio nível de título: um article com h2 contém sections com h3.

Sections com nome viram landmarks

Os leitores de tela listam certos elementos como landmarks entre os quais o usuário pode pular. Uma <section> só vira um landmark region quando tem um nome acessível. Aponte aria-labelledby para o título dela:

<section aria-labelledby="pricing-title">
  <h2 id="pricing-title">Pricing</h2>
  ...
</section>

Faça isso para as poucas sections para onde o usuário gostaria de pular direto, não para todas: uma página com vinte landmarks é tão difícil de percorrer quanto uma sem nenhum. Sections sem nome ainda ajudam, porque os títulos delas aparecem na lista de títulos do leitor de tela.

Sections também são bons destinos para links internos da página. Dê um id a uma delas e um link com href="#id" pula até ela:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Jump links</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    section { min-height: 420px; border-top: 2px solid #e5e7eb; }
  </style>
</head>
<body>
  <p><a href="#faq">Jump to the FAQ</a></p>
  <section id="features" aria-labelledby="features-title">
    <h2 id="features-title">Features</h2>
  </section>
  <section id="faq" aria-labelledby="faq-title">
    <h2 id="faq-title">FAQ</h2>
    <p><a href="#features">Back to features</a></p>
  </section>
</body>
</html>

Erros comuns

Usar <section> como wrapper de estilo. Se não há título nem tema, use <div>. A página de HTML semântico mostra onde cada tag de layout se encaixa.
Envolver um único post de blog em <section>. Um post que se sustenta sozinho é um <article>.
Sections sem título. Adicione um título, mesmo que visualmente oculto, ou repense se aquilo é uma section.
Trocar <main> por <section>. O conteúdo principal da página vai em <main>; as sections vão dentro dele.
Dar nome a todas as sections. Adicione aria-labelledby só às importantes, para a lista de landmarks continuar curta.

Perguntas frequentes

O que é a tag section no HTML?

<section> agrupa conteúdo que pertence a um mesmo tema, como um capítulo de um documento ou a parte de "Preços" de uma landing page. Normalmente ela deve começar com um título que diga do que a seção trata.

Qual a diferença entre section e div?

<section> diz que o conteúdo é uma parte temática do documento, com título próprio. <div> não diz nada; é uma caixa para estilo ou layout. Se você só precisa de um wrapper para o CSS, use <div>.

Qual a diferença entre section e article?

<article> é conteúdo que faz sentido sozinho, fora da página: um post de blog, um comentário, um card de produto. <section> é uma parte de algo maior que só faz sentido no seu contexto. Pergunte se daria para publicar o trecho sozinho: se sim, é um article.

Um article pode conter sections, e uma section pode conter articles?

Sim, os dois. Um artigo longo pode ser dividido em sections, e uma section como "Últimos posts" pode ter uma lista de articles.

Uma section precisa de um título?

Deveria ter em quase todos os casos, porque é o título que dá nome ao tema. Se você não consegue pensar num título para ela, o conteúdo provavelmente não é uma section e uma <div> serve melhor.

Conceitos relacionados