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 |