<header>
A tag <header> é um elemento HTML que representa o cabeçalho de uma página web.
A <header> pode conter alguns elementos de cabeçalho, são eles:
- Um ou mais elementos de título (<h1> - <h6>);
- Um logotipo ou ícone;
- Link de navegação;
- Um formulário de pesquisa.
Como utilizar a tag <header>?
Para criar o cabeçalho de uma página, utilize a tag de abertura (<header>) e a tag de fechamento (</header>). Após ter criado as tags, insira os elementos que serão utilizados no cabeçalho entre essas tags.
A tag <header> também pode ser utilizada para criar o cabeçalho de outros elementos dentro de uma página web. Segue abaixo os elementos que também podem receber a tag <header>:
- <article>;
- <section>;
- <aside>.
<header>: na prática
<header>
<h1>Devmedia</h1>
<img src="logodevmedia.png" alt="Devmedia logo">
</header>
Sintaxe
<header>
<elementos de cabeçalho>
</header>Exemplo de uso da tag <header>
Exemplo 1
No Código 2 demonstramos um exemplo utilizando a tag <header> para criar um cabeçalho com múltiplos elementos de títulos.
<header>
<h1>Devmedia</h1>
<h2>Assine a nossa plataforma e tenha acesso ao melhor curso do Brasil</h2>
<h3>Venha se tornar um dev front-end</h3>
</header>
Exemplo 2
No Código 3 demonstramos um exemplo de um cabeçalho com links de navegação.
<header>
<h1>Sites para todos os dev´s front-end</h1>
<nav>
<a href='https://www.w3schools.com'>W3Schools</a>
<a href='https://developer.mozilla.org/pt-BR/'>MDN Web Docs</a>
<a href='https://github.com/'>GitHub</a>
</nav>
</header>
Exemplo 3
Nos Códigos 4 e 5 demonstramos um exemplo de um cabeçalho com título, formulário de pesquisa e links de navegação.
<header>
<h1>Devmedia</h1>
<form>
<input placeholder='Pesquisar'/>
<button>Enviar</button>
</form>
<nav>
<a href='/home'>Home</a>
<a href='/sobre'>Sobre</a>
<a href='/contato'>Contato</a>
</nav>
</header>
header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: green;
padding: 20px 20px;
}
nav {
width: 200px;
display: flex;
justify-content: space-between;
}
Exemplo 4
Nos Códigos 6 e 7 demonstramos um exemplo de uso da tag <header> em outros elementos da página.
<body>
<header class='topo'>
<h1>Primeiro Cabeçalho (Topo)</h1>
</header>
<main>
<section>
<header>
<h2>Cabeçalho da Section </h2>
</header>
<div>
<h3>Texto abaixo do cabeçalho da section</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus facilisis blandit. Sed cursus consequat enim, sed venenatis augue elementum eu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus facilisis blandit. Sed cursus consequat enim, sed venenatis augue elementum eu.</p>
</div>
</section>
<aside>
<header>
<h2>Cabeçalho do Aside</h2>
</header>
<div>
<h3>Texto abaixo do cabeçalho do aside</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus facilisis blandit. Sed cursus consequat enim, sed venenatis augue elementum eu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus facilisis blandit. Sed cursus consequat enim, sed venenatis augue elementum eu.</p>
</div>
</aside>
</main>
</body>
.topo {
padding: 0px 20px;
display: flex;
justify-content: center;
text-align: center;
background-color: green;
}
main {
padding: 20px 0px;
display: flex;
justify-content: space-around;
background-color: yellowgreen;
}
section, aside {
width: 45%;
}
section header {
padding: 10px;
text-align: center;
background-color: orange;
}
section div {
padding: 10px;
text-align: center;
background-color: yellow;
}
aside header {
padding: 10px;
text-align: center;
background-color: orange;
}
aside div {
padding: 10px;
text-align: center;
background-color: yellow;
}
Note que neste exemplo a tag <header> foi utilizada dentro das tags <section> e <aside>.
Compatibilidade com navegadores
O <header> é suportado em todos os navegadores apresentados na tabela abaixo:
| <header> | Chrome | Mozilla Firefox | Edge / IE | Opera | Safari |
| sim | sim | sim | sim | sim |
