Esta página foi traduzida do inglês pela comunidade. Saiba mais e junte-se à comunidade MDN Web Docs.
header (cabeçalho)
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.
Sumário
O elemento HTML <header> representa um grupo de suporte introdutório ou navegacional. Pode conter alguns elementos de cabeçalho mas também outros elementos como um logo, seções de cabeçalho, formulário de pesquisa, e outros.
Experimente
<header>
<a class="logo" href="#">Cute Puppies Express!</a>
</header>
<article>
<header>
<h1>Beagles</h1>
<time>08.12.2014</time>
</header>
<p>
I love beagles <em>so</em> much! Like, really, a lot. They’re adorable and
their ears are so, so snugly soft!
</p>
</article>
.logo {
background: left / cover
url("/shared-assets/images/examples/puppy-header.jpg");
display: flex;
height: 120px;
align-items: center;
justify-content: center;
font:
bold calc(1em + 2 * (100vw - 120px) / 100) "Dancing Script",
fantasy;
color: #ff0083;
text-shadow: #000 2px 2px 0.2rem;
}
header > h1 {
margin-bottom: 0;
}
header > time {
font: italic 0.7rem sans-serif;
}
Note: Notas de utilização:
- O elemento
<header>não é separador de conteúdo (sectioning content), portanto, não introduz uma nova seção no outline.
- Categoria de conteúdo Flow content, conteúdo palpável.
- Conteúdo permitidoFlow content, mas não com descendentes de
<header>ou<footer> - Omissão da tag Nenhuma, as tags de abertura e fechamento são obrigatórias.
- Elementos-pai permitidos Qualquer elemento que aceite flow content. Note que o elemento
<header>não deve ser descendente de<address>,<footer>ou outro elemento<header>. - Interface DOM
HTMLElement
Atributos
Este elemento não possui outros atributos além dos atributos globais, comuns a todos os elementos.
Exemplos
<header> <h1>Título da Página Principal</h1> <img src="mdn-logo-sm.png" alt="MDN logo"> </header>
Especificações
| Specification |
|---|
| HTML # the-header-element |
Compatibilidade com navegadores
Loading...