DEV Community

Cover image for Por que usar HTML semântico
Cristiane Faria for WoMakersCode

Posted on • Edited on

3

Por que usar HTML semântico

Antigamente o papel do HTML era apenas estruturar documentos para a web, com a chegada do HTML5 passou também a dar significado aos conteúdos através das tags semânticas.

O HTML semântico torna a estrutura de documentos para a web o mais claro tanto para programadores quanto para navegadores da web, mecanismos de pesquisa, leitores de tela, entre outras engines que processam essa informação.

A Importância do HTML Semântico

Ao usar o HTML semântico, utilizamos os elementos HTML com base em seu significado, não apenas como são apresentados. Elementos como <div><span> não são elementos semânticos, pois não fornecem contexto para o que está dentro dessas tags.

Se você está pensando em não fazer a estruturação semântica com a desculpa de que o usuário não vai ver a diferença, aqui vão alguns excelentes motivos que farão você adotar o HTML semântico hoje mesmo.

Para o usuário

Nos dias de hoje, a tecnologia possibilita que usuários deficientes visuais também possam acessar um site e absorver seu conteúdo através de leitores de tela.

O HTML semântico torna as páginas da web acessíveis, isso ocorre porque os leitores de tela e navegadores são capazes de interpretar melhor o código.

Ao invés deste leitor interpretar tudo como um amontoado de DIVs, ele entende toda a hierarquia do conteúdo existente entre cada parte, como cabeçalho, seções, artigos e rodapés, etc.

Então, o entendimento do usuário não visual que acessa o conteúdo do site se torna bastante acessível.

Para o SEO

Os mecanismos de buscas que são responsáveis pelo ranqueamento do seu site também utilizam leitores não visuais para escanear o conteúdo da sua página.

Sem um HTML semântico os robôs não conseguem identificar com precisão a hierarquia do seu conteúdo. Nem mesmo saber qual é o conteúdo principal da sua página.

Então, sem a semântica, ele não consegue identificar a relevância do seu conteúdo lendo um cabeçalho com a mesma importância de um parágrafo.

A estruturação semântica é uma técnica de extrema relevância para os motores de busca e faz toda a diferença entre ter um site bem colocado nas pesquisas ou não.

Para o Programador

Ainda temos o benefício para quem escreve o código, sim, o programador. Seja para escrever ou dar uma manutenção no site, a estruturação semântica torna o código-fonte da página mais fácil de ler, facilitando muito o trabalho desse profissional.

Ao invés de ficar procurando o fechamento das DIVs pela indentação, basta buscar pela tag de cada elemento.

Conclusão

Agora que você já sabe a importância do que é HTML semântico, você pode começar a aprender mais sobre as tags na documentação da mozilla. É muito importante que você adote essa prática.

Com certeza vai proporcionar mais visitas ao seu site, melhorar o seu ranqueamento junto aos motores de busca e facilitar o entendimento e manutenção no seu próprio código.

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay