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.

elemento semântico header capa

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

Conclusão

Neste post vimos a utilização do elemento semântico header do HTML5

Esta tag pode ser inserida para cabeçalhos, que podem ser tanto o topo do site com o logo da empresa ou também um cabeçalho de algum outro elemento

E por hoje é isso, até o próximo post!

Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo 😀

Referências: MDN

Subscribe
Notify of
guest

2 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Edson José dos Santos

Matheus Battisti, muito obrigado ajudou muito!

Battisti

valeu Edson! =)