<section>

O elemento HTML <section> representa uma seção genérica contida em um documento HTML, geralmente com um título, quando não existir um elemento semântico mais específico para representá-lo.

Por exemplo, um menu de navegação deve estar dentro um elemento <nav>, mas uma lista de resultados de pesquisa ou a exibição de um mapa e seus controles não possuem elementos específicos, e podem ser colocados dentro de uma <section>.

Categorias de conteúdo Conteúdo de fluxo , conteúdo de seção, conteúdo palpável.
Conteúdo permitido Conteúdo de fluxo.
Omissão de tags Sem omissão de tags
Tags-pai permitidas Qualquer elemento que aceite conteúdo de fluxo. Note que um elemento <section> não deve ser um descendente de um elemento <address>.
Regras ARIA permitidas alert, alertdialog (en-US), application (en-US), banner (en-US), complementary (en-US), contentinfo (en-US), dialog (en-US), document (en-US), feed (en-US), log (en-US), main (en-US), marquee (en-US), navigation (en-US), search (en-US), status (en-US), tabpanel (en-US)
Interface DOM HTMLElement (en-US)

Atributos

Este elemento inclui apenas os atributos globais.

Notas de uso

  • Cada <section> deve ser identificado, geralmente incluindo um cabeçalho (elemento <h1> (en-US)-<h6> (en-US)) como um filho do elemento <section>.
  • Se faz sentido distribuir separadamente o conteúdo de um elemento <section>, use um elemento <article> em seu lugar.
  • Não use o elemento <section> como um container genérico; para isso que a <div> serve, especialmente quando a seção é apenas com propósito de estilização. Uma regra de ouro é ,"usar quando uma seção deve aparecer logicamente na estrutura de um documento".

Exemplo 1

Antes

html

<div>
  <h1>Cabeçalho</h1>
  <p>Um monte de conteúdo incrível</p>
</div>

Depois

html

<section>
  <h1>Cabeçalho</h1>
  <p>Um monte de conteúdo incrível</p>
</section>

Exemplo 2

Antes

html

<div>
  <h2>Cabeçalho</h2>
  <img src="passaro.jpg" alt="pássaro" />
</div>

Depois

html

<section>
  <h2>Cabeçalho</h2>
  <img src="passaro.jpg" alt="pássaro" />
</section>

Especificações

Especificação Status Comentários
HTML Living Standard
The definition of '<section>' in that specification.		 Padrão em tempo real
HTML 5.1
The definition of '<section>' in that specification.		 Recomendação
HTML5
The definition of '<section>' in that specification.		 Recomendação

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também