Artigos HTML e CSS HTML Header: crie o cabeçalho da página com a tag header

<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>
Código 1. Tag <header> na prática

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>
Código 2. Código HTML

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>
Código 3. Código HTML

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>
Código 4. Código HTML
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;
}
Código 5. Código CSS

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>
Código 6. Código HTML
.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;
}
Código 7. Código CSS

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