<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, 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

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

Depois

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

Exemplo 2

Antes

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

Depois

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

Especificações

Compatibilidade de navegadores

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suporte básico 5 4.0 (2.0) 9.0 11.10 4.1
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suporte básico 2.2 4.0 (2.0) 9.0 11.0 5.0 (iOS 4.2)

Veja também