Se você trabalha ou pretende trabalhar com desenvolvimento web, com certeza, já ouviu falar sobre o HTML. Essa linguagem de marcação é uma das mais conhecidas e, em muitos casos, é o primeiro contato de quem busca entrar na área de TI.

A escrita dessa linguagem, quando comparada a outras que são voltadas para programação, é mais simples de ser lida e escrita, uma vez que ela não precisa ter conhecimentos de lógica de programação.

Apesar disso, criar um bom HTML pode ser uma tarefa bem difícil, uma vez ele precisa ser bem organizado e funcional. Quando falamos em criar um bom HTML, em muitos casos, estamos falando da sua semântica, e sobre isso que quero explicar nesse artigo.

O que é HTML Semântico?

HTML semântico é quando o código HTML está descritivo, utilizando tags que são consideradas semânticas. Isso deixa o código mais organizado e de fácil manutenção. Além disso, os próprios buscadores (Google, Bing, Duck Duck Go, etc.) costumam indexar melhor as utilizam essas tags nos momentos certos.

Hoje, o HTML contem diversas tags que são consideradas semânticas, mas isso não é uma regra para todas, uma vez que existem tags mais genéricas. Essas tags são consideradas não semânticas e tem um papel mais generalistas no código.

Tags semânticas

Dentre as tags que são consideradas semânticas, algumas aparecem com mais frequência no código do que outras. Normalmente essas tags são voltadas para conteúdos como textos, formulários ou, simplesmente, para separar a página por partes. Confira algumas tags HTML que são consideradas semânticas:

• article
• h1
• p
• header
• main
• footer
• form
• table
• section

Em resumo, essas tags servem para identificar uma parte do código, uma vez que elas podem se referir a uma cabeçalho, com header, ou um rodapé, com footer, por exemplo.

Você também pode ver a documentação da W3Schools para pegar mais tags que são semânticas clicando aqui.

Tags não semânticas

Como já foi explicado, algumas tags são consideradas não semânticas. Essas tags não tem um objetivo claro no código e isso pode dificultar a compreensão do conteúdo caso sejam usadas em excesso pela pessoa programadora.

No HTML, as tags div e span são consideradas as marcações não semânticas. O div, por exemplo, pode significar qualquer coisa, uma vez que representa somente uma divisão da página, podendo ser um botão, um formulário ou qualquer outro elemento.

Apesar dessas tags não serem semânticas, é possível sim utilizar elas no código. Em muitos casos, você precisará de uma div ou de um span porque não há uma solução própria para descrever uma parte da página. Isso pode acontecer com frequência dependendo da página, mas o ideal é que seu código tenha o mínimo dessas tags.

Conclusão

Se você chegou até aqui, espero que tenha entendido um pouco sobre como funciona o HTML semântico e porque ele é tão importante.

Caso você queira deixar um feedback sobre o conteúdo ou tenha alguma dúvida, por favor, deixe um comentário nessa postagem.