A importância de um HTML semântico

Olá! Eu sou a Sther e hoje quero compartilhar com vocês a importância do HTML semântico.
Muita gente pensa que frontend é só sair colocando <div> e "ser feliz". Mas, a longo prazo, isso pode se transformar em um verdadeiro pesadelo: código confuso, difícil de manter, prejudicial para o SEO e nada acessível para usuários que dependem de tecnologias assistivas.

Aí que entra o poder da semântica :D

🏷️ O que é HTML Semântico?

Segundo o MDN Web Docs:

Semântica:
Na programação, a semântica se refere ao significado de um trecho de código — por exemplo, "que efeito tem a execução dessa linha de JavaScript?" ou "que finalidade ou função esse elemento HTML tem" (em vez de "como ele se parece?").

Ou seja, não é sobre a aparência de um elemento, mas sobre o significado e o papel que ele exerce dentro da página.

Um exemplo simples:

<!-- Ruim: sem semântica --> <div>Meu título principal</div> <div>Seção de artigos</div> <div>Rodapé</div> <!-- Bom: com semântica --> <h1>Meu título principal</h1> <section>Seção de artigos</section> <footer>Rodapé</footer> 

Com o uso correto, navegadores, mecanismos de busca e leitores de tela conseguem entender melhor a estrutura do conteúdo.

📈 HTML Semântico e SEO

O SEO (Search Engine Optimization) é um dos maiores aliados de quem quer destacar um site nos mecanismos de busca.

Um dos erros mais comuns é usar vários <h1> na mesma página: isso confunde o bot do Google, e ele não sabe qual título considerar como o principal.

Exemplo:

<!-- Errado --> <h1>Sobre nós</h1> <h1>Produtos</h1> <h1>Contato</h1> <!-- Correto --> <h1>Minha Empresa</h1> <h2>Sobre nós</h2> <h2>Produtos</h2> <h2>Contato</h2> 

A hierarquia correta de cabeçalhos ajuda os “bots” a entenderem a estrutura da informação e melhora o ranqueamento do site.

♿ HTML Semântico e Acessibilidade

A acessibilidade é uma das funcionalidades principais do site, gosto de imaginar que garante que qualquer pessoa consiga navegar pelo seu site, inclusive quem utiliza leitores de tela.

Veja a diferença que uma boa estrutura faz:

<header> <h1>Blog da Sther</h1> </header> <nav> <ul> <li><a href="#artigos">Artigos</a></li> <li><a href="#sobre">Sobre</a></li> </ul> </nav> <main> <article id="artigos"> <h2>Por que HTML semântico importa?</h2> <p>Explicação do conteúdo…</p> </article> </main> 

Com essa organização, o leitor de tela consegue identificar cabeçalho, menu, conteúdo principal e artigos de forma clara.

🔧 ARIA: Quando a Semântica Precisa de Ajuda

Nem sempre apenas as tags são suficientes. Em elementos dinâmicos como carrosséis, abas ou menus dropdown é possível usar atributos ARIA para dar mais contexto às tecnologias assistivas.

<div role="region" aria-label="Carrossel de imagens"> <button aria-label="Imagem anterior">◀</button> <img src="foto1.jpg" alt="Pôr do sol na praia" aria-hidden="false" /> <img src="foto2.jpg" alt="Montanha nevada" aria-hidden="true" /> <button aria-label="Próxima imagem">▶</button> </div> 

Aqui, o role="region" indica que se trata de um carrossel, e o aria-label descreve os botões para quem não consegue vê-los. Assim, a experiência de navegação se torna mais inclusiva e acessível.

O HTML semântico vai muito além de um detalhe técnico: ele é a base para sites mais organizados, acessíveis e preparados para o futuro.
Praticar boas escolhas de tags e atributos não só facilita a vida de quem desenvolve, como também melhora a experiência de quem navega.

Obrigada por te lido até aqui, câmbio desligo.