Aula 31 - Semântica dos Elementos HTML

Introdução

A semântica HTML está relacionada ao significado dos elementos utilizados na construção de uma página Web.

Em vez de utilizar apenas elementos genéricos, como <div>, utilizamos tags que representam melhor a função de cada conteúdo.

📌 HTML semântico torna o código mais organizado, acessível e fácil de entender.

O que é Semântica?

Semântica significa atribuir significado aos elementos.

No HTML, isso significa utilizar uma tag adequada para cada tipo de informação.

Exemplo:

❌ HTML sem semântica:



<div>

Menu

</div>

✅ HTML semântico:



<nav>

Menu

</nav>

HTML Semântico x HTML Não Semântico

Não Semântico	Semântico
<div>	<header>
<div>	<nav>
<div>	<main>
<div>	<footer>

Por que utilizar HTML Semântico?

Melhora a organização do código.
Facilita a manutenção do projeto.
Ajuda mecanismos de busca (SEO).
Melhora a acessibilidade.
Facilita o trabalho em equipe.
Segue padrões recomendados pelo W3C.

Principais Elementos Semânticos

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

Elemento Header

O elemento <header> representa o cabeçalho de uma página ou seção.



<header>


<h1>

Minha Empresa

</h1>


</header>

Elemento Nav

Utilizado para criar áreas de navegação.



<nav>


<a href="#">

Home

</a>



<a href="#">

Contato

</a>



</nav>

Elemento Main

Define o conteúdo principal da página.



<main>


Conteúdo principal


</main>

⚠️ Uma página normalmente possui apenas um elemento <main>.

Elemento Section

Agrupa conteúdos que possuem relação entre si.



<section>


<h2>

Serviços

</h2>


<p>

Descrição dos serviços.

</p>



</section>

Elemento Article

Representa um conteúdo independente que pode ser distribuído sozinho.

Exemplos:

Notícias
Posts de blog
Comentários
Publicações

Elemento Aside

Representa informações complementares ao conteúdo principal.

Exemplos:

Banners
Links relacionados
Informações adicionais

Elemento Footer

Representa o rodapé da página.



<footer>


<p>

© 2026 Minha Empresa

</p>



</footer>

Exemplo de Estrutura HTML Semântica



<body>



<header>

Cabeçalho

</header>



<nav>

Menu

</nav>



<main>



<section>

Conteúdo

</section>



<article>

Artigo

</article>



</main>



<footer>

Rodapé

</footer>



</body>

Acessibilidade e Semântica

Leitores de tela utilizados por pessoas com deficiência visual conseguem interpretar melhor páginas com elementos semânticos.

♿ A semântica melhora a inclusão digital.

Boas Práticas

Utilizar tags pelo significado e não apenas pela aparência.
Evitar excesso de divs sem necessidade.
Organizar corretamente a estrutura da página.
Seguir padrões HTML5.
Pensar em acessibilidade.

Resumo da Aula

Semântica define o significado dos elementos HTML.
HTML5 trouxe diversas tags semânticas.
Melhora SEO e acessibilidade.
Organiza melhor o código.
É uma boa prática profissional.

🏗️ Semântica dos Elementos HTML