Aula 32 - Elemento Header HTML

Introdução

O elemento <header> é uma tag semântica do HTML5 utilizada para representar o cabeçalho de uma página ou de uma seção.

Ele normalmente contém informações introdutórias, como logotipo, títulos, menus de navegação e informações importantes do conteúdo.

📌 O elemento header não significa apenas "topo da página". Ele pode existir em diferentes partes do documento.

O que é o elemento Header?

A tag <header> define uma área de introdução ou agrupamento de informações iniciais.



<header>


Conteúdo do cabeçalho


</header>

Função do Header

Utilização	Exemplo
Identidade do site	Logo e nome da empresa
Título principal	Nome da página
Apresentação	Informações iniciais
Navegação	Menu principal

Estrutura Básica



<header>


    <h1>

    Minha Empresa

    </h1>



    <p>

    Soluções em Tecnologia

    </p>


</header>

O navegador interpreta esse bloco como uma área de apresentação.

Header no Início da Página



<body>



<header>



<h1>

Curso Desenvolvimento Web

</h1>



</header>



<main>



Conteúdo da página



</main>



</body>

Header dentro de uma Section

Uma página pode possuir vários headers, desde que tenham funções diferentes.



<section>



<header>



<h2>

Notícias

</h2>



</header>



<p>

Texto da notícia.

</p>



</section>

Elementos Comuns dentro do Header

Elemento	Utilização
<img>	Logotipo ou imagem
<h1>	Título principal
<p>	Texto introdutório
<nav>	Menu de navegação

Exemplo de Cabeçalho Profissional



<header>



<img src="logo.png">



<h1>

Empresa XYZ

</h1>



<nav>



<a href="#">

Home

</a>



<a href="#">

Contato

</a>



</nav>



</header>

Header x Div

Div	Header
Não possui significado específico.	Possui significado semântico.
Usado para agrupamento.	Representa uma introdução.
Menos interpretável por ferramentas.	Melhor para SEO e acessibilidade.

Cuidados no Uso

Não utilizar header apenas para criar espaçamento.
Não substituir todos os divs automaticamente.
Usar quando existir uma função de cabeçalho.
Manter uma estrutura organizada.

Exemplo Completo de Página



<body>



<header>

Logo

Título

Menu

</header>



<main>

Conteúdo principal

</main>



<footer>

Rodapé

</footer>



</body>

Resumo da Aula

<header> é um elemento semântico HTML5.
Representa cabeçalhos de páginas ou seções.
Pode conter títulos, imagens e menus.
Melhora organização e acessibilidade.
É recomendado pelo padrão HTML5.

🏷️ Elemento Header no HTML