O HTML5 introduziu uma série de elementos semânticos de estrutura que proporcionam uma maneira clara e lógica de organizar o conteúdo de uma página web. Esses elementos ajudam a definir a estrutura de uma página de maneira significativa, tanto para desenvolvedores quanto para motores de busca, melhorando a acessibilidade e a SEO. Vamos explorar alguns desses elementos essenciais além do <head>.
<aside> 💡 SEO é o conjunto de estratégias usadas para otimizar e melhorar o posicionamento de um site nos resultados dos motores de busca, aumentando sua visibilidade e tráfego orgânico.
</aside>
<header>: Cabeçalho da Página ou SeçãoA tag <header> no HTML5 é utilizada para definir o cabeçalho de uma página ou de uma seção específica dentro dela. Este elemento é parte do conjunto de elementos semânticos introduzidos com o HTML5, que ajudam a descrever a estrutura e o conteúdo de um site de maneira mais clara tanto para os usuários quanto para os motores de busca. Vamos detalhar mais sobre seu uso e importância:
<aside>
💡 Não confunda <head> com <header>. Enquanto <head> é uma seção que contém metadados, links para folhas de estilo e scripts que não são exibidos diretamente na área de conteúdo do navegador, <header> refere-se a um elemento semântico visível na página, destinado ao cabeçalho da página ou de uma seção, geralmente contendo títulos, informações de navegação e outros conteúdos introdutórios.
</aside>
<header><header> comunica claramente aos navegadores e às ferramentas de SEO que o conteúdo dentro deste elemento serve como introdução ou cabeçalho da página ou seção.<h1>), logotipos, elementos de navegação (<nav>), informações de contato e até mesmo motores de busca internos. O objetivo é agrupar conteúdo introdutório e de navegação.<section>, <article>). Isso ajuda na estruturação de conteúdo diversificado e complexo, como em portais de notícias ou blogs.<header>
<h1>Título da Página</h1>
<nav>
<!-- Links de navegação -->
</nav>
</header>
<header>: Define o início do cabeçalho da página.<h1>: Representa o título principal da página. É uma prática recomendada ter um <h1> claro e relevante em cada página, pois isso ajuda na SEO e na acessibilidade.<nav>: Contém a navegação principal do site. Embora o <nav> possa ser usado fora do <header>, sua inclusão dentro do cabeçalho é comum para facilitar o acesso aos links principais logo no início da página.<header> Desnecessariamente: Evite usar múltiplos **<header>**s que sirvam ao mesmo propósito em uma única página. Use-o para introduzir a página ou seções distintas.<header> para garantir que os usuários encontrem facilmente o que procuram.<header>, especialmente os menus de navegação, seja acessível e funcione bem em dispositivos móveis.