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