Como utilizar o elemento semântico header

Neste post será explicada a utilização do elemento semântico header, que teve sua origem na versão 5 do HTML e preenche um vazio que existia nos cabeçalhos.

Como utilizar o elemento semântico header?

A tag <header> também cai para o time das tags óbvias do HTML5

Acredito também que esse seja um dos intuitos do HTML semântico, tornar a visualização das tags bem óbvias para os programadores fazerem as melhores escolhas

Então nós utilizaremos o header quando vamos representar um cabeçalho

Este cabeçalho pode ser de um site, contendo uma <nav> que representará a barra de navegação, e ainda uma logo da empresa/marca

Quer se especializar em HTML e CSS? Veja o nosso catálogo de cursos.

Mas claro que você também pode inserir o header para alguma seção que possua um cabeçalho

Por exemplo: um formulário ou uma tabela com dados

Utilizando header na prática:

Quando utilizamos a tag <header> devemos nos atentar para ela ficar no topo do contexto que foi inserida, afinal é um cabeçalho

Então vamos exemplificar o clássico, e talvez mais utilizado, caso do cabeçalho da página

Exemplo HTML:

<header>
    <a src="/" id="logo"><img src="logo.png" /></a>
    <nav>
        <li><a href="#">Home</a></li>
        <li><a href="#">Produtos</a></li>
        <li><a href="#">Sobre</a></li>
        <li><a href="#">Contato</a></li>
    </nav>
</header>

Como primeiro elemento dentro do <body>, e antes da tag <main>

O elemento header neste caso tem um logo e também uma barra de navegação, utilizando o elemento nav para seguirmos os conceitos do HTML semântico

Então este seria um perfeito exemplo de sua utilização, posicionado para ser o cabeçalho do site, parte fundamental da maioria dos projetos web