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