Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
<section>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julho de 2015.
Oelemento 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 aceiteconteú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 osatributos 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 # the-section-element |