Tag HTML <header>
A tag <header> define o cabeçalho de uma página ou seção. Descrição, atributos e exemplos de uso da tag.
A tag <header> define o conteúdo introdutório de uma página ou seção. Geralmente contém um logotipo, o título do site, uma caixa de pesquisa e links de navegação, como um menu <nav>.
Esta tag não introduz uma nova seção no esboço do documento. Um elemento <header> normalmente contém um cabeçalho (um elemento <h1>–<h6>) para a seção envolvente, mas um cabeçalho não é obrigatório.
A tag <header> é um dos elementos semânticos do HTML5. Em um único documento, você pode usar várias tags <header>. Elas são comumente colocadas dentro dos elementos <body>, <article> ou <section>. O elemento correspondente para fechar o conteúdo é a tag <footer>.
Por que usar múltiplos headers
Uma página pode ter mais de um <header> porque os cabeçalhos existem em diferentes níveis:
- Cabeçalho em nível de página — um filho direto de
<body>. Apresenta o documento inteiro: o logotipo do site, a navegação global, um campo de pesquisa. Normalmente existe apenas um desses. - Cabeçalho em nível de seção — um cabeçalho colocado dentro de um
<article>ou<section>. Apresenta apenas aquele bloco de conteúdo, por exemplo, o título, o autor e a data de publicação de uma postagem de blog.
Considere uma página de índice de blog. O <header> em nível de página contém o nome do site e o menu principal. Então cada postagem é um <article> com seu próprio <header> com o título e os metadados daquela postagem. Ambos são cabeçalhos, mas descrevem escopos diferentes, o que ajuda navegadores, leitores de tela e mecanismos de busca a entender a estrutura.
Acessibilidade e o landmark banner
Quando <header> é um filho direto de <body>, as tecnologias assistivas o expõem como o landmark ARIA banner — a região introdutória de todo o site. Os usuários de leitores de tela podem ir diretamente para ele, portanto não é necessário adicionar role="banner" manualmente.
Esse mapeamento desaparece quando o <header> está aninhado dentro de um <article>, <section>, <main>, <aside> ou <nav>. Tal cabeçalho apresenta apenas sua própria seção e não é tratado como o landmark banner. Um documento deve ter apenas um landmark banner, portanto mantenha um único <header> em nível de página como filho de <body>.
Sintaxe
A tag <header> vem em pares. O conteúdo é escrito entre as tags de abertura (<header>) e fechamento (</header>).
Exemplo da tag HTML <header>
Esta página tem dois cabeçalhos: um cabeçalho em nível de página dentro de <body> e um cabeçalho em nível de seção dentro de um <article>.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
padding: 0;
}
ul li {
display: inline-block;
margin-right: 10px;
color: #778899;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>About us</li>
</ul>
</nav>
<h1>Welcome to our page</h1>
<hr>
</header>
<article>
<header>
<h2>The section title</h2>
<p>The text paragraph.</p>
</header>
</article>
</body>
</html>Exemplo da tag HTML <header> com propriedades CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 2;
}
h2 {
text-align: center;
}
ul {
padding: 0;
}
ul li {
list-style-type: none;
display: inline-block;
margin-right: 10px;
}
a {
display: block;
color: #778899;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="https://www.w3docs.com/learn-html.html">Learn HTML</a>
</li>
<li>
<a href="https://www.w3docs.com/learn-git.html">Learn Git</a>
</li>
</ul>
</nav>
<h1>Welcome to our page</h1>
<hr>
</header>
<main>
<h2>Get answers to your coding questions</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</main>
</body>
</html>Atributos
A tag <header> suporta os Atributos Globais e os Atributos de Evento. Ela não possui atributos próprios.
Adicionando id e class para estilização
<header id="main-header" class="site-header">
<h1>Page Title</h1>
</header>Tags relacionadas
<footer>— o elemento de fechamento correspondente ao<header>.<main>— o conteúdo dominante do documento.<nav>— links de navegação, frequentemente colocados dentro de um cabeçalho.<section>— uma seção independente que pode ter seu próprio cabeçalho.<article>— conteúdo autossuficiente que pode ter seu próprio cabeçalho.