HTML <section> Tag

O elemento HTML <section> é um dos elementos semânticos do HTML5. Ele agrupa um conjunto de conteúdo relacionado que forma uma parte temática da página — uma parte que, idealmente, apareceria como uma entrada no esboço do documento (um bloco de notícias, uma área de "Fale conosco", um capítulo de um artigo longo, etc.).

Esta página explica o que <section> significa, como decidir entre <section>, <article> e <div>, por que uma section quase sempre precisa de um título, e a regra de acessibilidade que transforma uma section em um landmark navegável.

Quando usar `<section>` vs `<article>` vs `<div>`

Esses três elementos parecem intercambiáveis, mas carregam significados muito diferentes. Escolha pela intenção, não pela aparência:

<section> — um agrupamento temático de conteúdo que pertence ao esboço da página e possui seu próprio título. Use quando o conteúdo é "uma parte distinta desta página", mas não faz sentido por si só se removido da página. Exemplos: um bloco de Introdução, um bloco de Preços, um bloco de Avaliações em uma página de produto.
<article> — uma composição autocontida e distribuível de forma independente. Use quando o conteúdo ainda faria sentido se você o extraísse e publicasse em outro lugar (um feed sindicalizado, uma entrada RSS, um resultado de pesquisa). Exemplos: uma postagem de blog, uma notícia, um comentário de usuário, um cartão de produto.
<div> — sem significado semântico algum; uma caixa genérica que existe apenas como gancho de estilo ou script. Use <div> quando precisar apenas de um invólucro para layout (um contêiner flex/grid, uma coluna) e não há conteúdo temático a rotular.

Um teste rápido: se você consegue dar ao bloco um título significativo, provavelmente é uma <section>. Se o bloco poderia existir de forma independente como sua própria página ou item de feed, é um <article>. Se você está adicionando apenas para aplicar CSS ou uma classe, é um <div>.

Perigo

Não use <section> como invólucro genérico para layout ou estilo. Se um bloco de marcação não tem significado temático nem título, use um <div> em vez disso.

O requisito de título

O HTML espera que cada <section> seja identificada, e a forma normal de fazer isso é com um título (<h1>–<h6>). Uma section sem título não tem um tópico claro e produz uma entrada "sem título" confusa nos esboços de tecnologias assistivas.

Use o nível de título que corresponda à profundidade de aninhamento: um <h2> para uma section de nível superior abaixo do <h1> da página, um <h3> para uma section aninhada um nível mais abaixo, e assim por diante. Mantenha a hierarquia lógica sem pular níveis — veja Títulos HTML para as regras.

<h1>Web technologies</h1>

<section>
  <h2>HTML</h2>
  <p>HTML is the standard markup language for creating web pages.</p>
</section>

<section>
  <h2>CSS</h2>
  <p>CSS describes how HTML elements should be presented.</p>
</section>

`<section>` e acessibilidade: o landmark `region`

Uma <section> não é automaticamente um landmark para o qual usuários de leitores de tela podem navegar. Ela só se torna um landmark region navegável quando possui um nome acessível. Você fornece esse nome de duas formas:

aria-labelledby apontando para o id do seu título (preferido — o título visível e o nome acessível permanecem sincronizados), ou
aria-label com uma string literal (quando não há texto de título visível para referenciar).

Sem um nome, a section é apenas um agrupamento para o esboço; com um nome, ela aparece na lista de landmarks do leitor de tela.

<section aria-labelledby="pricing-heading">
  <h2 id="pricing-heading">Pricing</h2>
  <p>Choose the plan that fits your team.</p>
</section>

<!-- No visible heading? Name it directly: -->
<section aria-label="Search results">
  <p>3 results found.</p>
</section>

É por isso que <section> difere de regiões como <main>, <aside>, <header> e <footer>: esses elementos expõem funções de landmark por conta própria, enquanto <section> requer um nome para isso.

Sintaxe

A tag <section> vem em pares. O conteúdo é escrito entre as tags de abertura (<section>) e de fechamento (</section>).

Exemplo da tag HTML `<section>`:

<!DOCTYPE html>
<html>
  <head>
    <title>Using the section tag</title>
  </head>
  <body>
    <section>
      <h2>Hypertext markup language HTML</h2>
      <p>HTML is the standard markup language for creating web pages and web applications. Browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
    </section>
    <section>
      <h2>CSS</h2>
      <p>Formal language, which is used as a description zone, formatting the appearance of a web page, written by the help of markup languages HTML and XHTML, but it can be applied to any XML-document, for example, to SVG or XUL.</p>
    </section>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Exemplo de `<section>` aninhada dentro de um `<article>`:

Um conteúdo longo e autocontido é um <article>; os capítulos dentro dele são elementos <section>. Cada section possui seu próprio título e seu próprio conteúdo distinto.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <article>
      <h1>A short guide to web technologies</h1>
      <p>Modern web pages are built from three core technologies that work together.</p>

      <section>
        <h2>HTML: structure</h2>
        <p>HTML is the standard markup language for web pages. It describes the structure of a document — headings, paragraphs, links and media — so browsers can render it as a page.</p>
      </section>

      <section>
        <h2>CSS: presentation</h2>
        <p>CSS controls how the structured content looks: colors, spacing, typography and responsive layout across different screen sizes.</p>
      </section>

      <section>
        <h2>JavaScript: behavior</h2>
        <p>JavaScript adds interactivity, letting the page respond to user actions, update content dynamically and communicate with servers.</p>
      </section>
    </article>
  </body>
</html>

Experimente Você Mesmo »

Atributos

A tag <section> suporta os Atributos Globais e os Atributos de Evento.

Como estilizar uma tag HTML <section>

section {
  background-color: #f9f9f9;
  padding: 20px;
  border: 1px solid #ddd;
}

Prática

Qual é a finalidade da tag section em HTML?

Agrupar um bloco temático de conteúdo relacionado que pertence ao esboço da página.Envolver conteúdo apenas para estilização, sem significado semântico.Marcar um conteúdo autocontido e distribuível de forma independente.Criar um landmark de região navegável quando recebe um nome acessível.É usada apenas no rodapé da página web.

Quando usar <section> vs <article> vs <div>