🏗️ Estrutura Semântica HTML5

Introdução

A estrutura semântica do HTML5 permite criar páginas com elementos que possuem significado, facilitando a interpretação do conteúdo por navegadores, mecanismos de busca e tecnologias assistivas.

Antes do HTML5, muitos desenvolvedores utilizavam apenas elementos genéricos como <div> para construir toda a página.

📌 HTML semântico significa utilizar a tag correta para representar cada tipo de conteúdo.

O que é Semântica?

Semântica é o significado atribuído aos elementos de uma página.

Em HTML, significa informar qual é a função de cada parte do documento.

Exemplo:

<header> → Cabeçalho da página
<nav> → Menu de navegação
<main> → Conteúdo principal
<footer> → Rodapé

HTML Antigo x HTML5 Semântico

HTML Antigo HTML5
Uso excessivo de divs. Uso de elementos com significado.
Difícil interpretação. Melhor organização.
Menor acessibilidade. Melhor suporte para leitores de tela.

Principais Elementos Semânticos

Elemento Função
<header> Cabeçalho da página ou seção.
<nav> Área de navegação.
<main> Conteúdo principal.
<section> Agrupamento de conteúdos relacionados.
<article> Conteúdo independente.
<aside> Conteúdo complementar.
<footer> Rodapé.

Modelo de Estrutura HTML5



<body>



<header>

Cabeçalho

</header>



<nav>

Menu

</nav>



<main>



<section>



<article>

Conteúdo

</article>



</section>



<aside>

Conteúdo extra

</aside>



</main>



<footer>

Rodapé

</footer>



</body>

Elemento Header

Representa o início de uma página ou seção.



<header>



<h1>

Meu Site

</h1>



</header>

Elemento Nav

Utilizado para criar menus e links de navegação.



<nav>



<a href="#">

Home

</a>



<a href="#">

Contato

</a>



</nav>

Elemento Main

Indica o conteúdo mais importante da página.



<main>



Conteúdo principal



</main>

Elemento Section

Agrupa conteúdos que possuem o mesmo tema.



<section>



<h2>

Cursos

</h2>



Conteúdo



</section>

Elemento Article

Representa conteúdos independentes que podem ser distribuídos.

Exemplos:
  • Notícias
  • Posts de blog
  • Comentários
  • Produtos

Benefícios da Estrutura Semântica

Semântica e SEO

Os mecanismos de busca analisam a estrutura da página para compreender melhor o conteúdo.

⚠️ Usar apenas divs dificulta a compreensão da estrutura do site pelos buscadores.

Exemplo Completo



<header>

Logo e título

</header>



<nav>

Menu principal

</nav>



<main>



<article>

Texto principal

</article>



<aside>

Links relacionados

</aside>



</main>



<footer>

Contato

</footer>

Resumo da Aula

🎓 Aula concluída! Agora você conhece a estrutura semântica do HTML5.