HTML Header: Guia Pr�tico

<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

See the Pen HTML Header - Exemplo 1 by Wladimir Batista Castro (@wladimirrj) on CodePen.

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

See the Pen HTML Header - Exemplo 2 by Wladimir Batista Castro (@wladimirrj) on CodePen.

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

See the Pen HTML Header - Exemplo 3 by Wladimir Batista Castro (@wladimirrj) on CodePen.

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

See the Pen HTML Header - Exemplo 4 by Wladimir Batista Castro (@wladimirrj) on CodePen.

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
<header>	sim	sim	sim	sim	sim

HTML Header: crie o cabe�alho da p�gina com a tag header

Nesta documentação aprenda sobre o elemento HTML Header, como aplicar a tag header em código HTML e como utilizar para configurar um cabeçalho para a sua página web.