<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
- Outros elemtnos relacionados:
<body>
,<nav>
,<article>
,<aside>
,<h1>
(en-US),<h2>
(en-US),<h3>
(en-US),<h4>
(en-US),<h5>
(en-US),<h6>
(en-US),<hgroup>
,<header>
,<footer>
,<address>
; - Seções e estrurura do um documento HTML5.