<section>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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, application, banner, complementary, contentinfo, dialog, document, feed, log, main, marquee, navigation, search, status, tabpanel
Interface DOM HTMLElement

Atributos

Este elemento inclui apenas os atributos globais.

Notas de uso

  • Cada <section> deve ser identificado, geralmente incluindo um cabeçalho (elemento <h1>-<h6>) 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

Specification
HTML Standard
# the-section-element

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também