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> e <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.