Entenda a importância da semântica do HTML para SEO e acessibilidade

Entenda a importância da semântica do HTML para SEO e acessibilidade

Antes de tudo você sabe o que significa a palavra semântica?

se·mân·ti·co
1. Relativo à semântica
2. Relativo a significação, ao significado. = SIGNIFICATIVO.

https://www.priberam.pt/dlpo/sem%C3%A2ntica [consultado em 29-11-2017].

Podemos então entender que semântica do HTML esta relacionada ao significado de uma tag de acordo com o que ela deve representar em um site…

Mas para que fazer isso?

Bem, quando temos a possibilidade de visualizar um layout conseguimos distinguir por cores, forma tamanho e afins, o que cada parte do site aquele componente refere-se, certo? Agora, e se estivermos falando de alguém que não tem a capacidade de visualizar o nosso site como pessoas com deficiência visual ou até mesmo robôs?

Usando a semântica do HTML podemos facilitar a manutenção, compreensão do documento, auxiliar programas de leitura de sites utilizados por deficientes visuais e o mais importante, ajudar o reconhecimento de informações para a indexação por robôs de busca, que é uma das técnicas utilizadas para o SEO (Search Engine Optimization).

Tag semântica

O HTML5 incluiu diversas tags com o propósito de melhorar a semântica da nossa página, as principais tags semânticas adicionadas foram:

  • <header> – Representa o conteúdo introdutório/cabeçalho de uma tag de seção.
  • <nav> – Representa um agrupamento de links utilizados para navegar para outras páginas ou para partes da mesma página.
  • <main> – Representa o conteúdo relacionado ao tema principal da página ou a parte principal da aplicação.
  • <aside> – Representa um conteúdo que tem relação com os conteúdos ao seu lado.
  • <section> – Representa um agrupamento temático de um conteúdo, normalmente com um título usando as tags <h1>~<h6>
  • <article> – Representa um conteúdo completo, que pode ser utilizado sem dependências.
  • <footer> – Representa o conteúdo final/rodapé de uma tag de seção.

Uma possível composição das tags para o desenvolvimento de um site pode ser algo assim:

semântica

Tais tags semânticas já existiam antes do HTML5, algumas delas são <img>, <p>, <form> e afins… além destas tags que são utilizadas dentro da tag body do HTML, existem também as tags de metadados utilizadas na tag head, um uso extremamente importante, para tais tags é para a criação de um preview para o conteúdo de um site, que aparecem principalmente quando um usuário compartilha o site em um rede social ou aplicativos de mensagem.

Tenho certeza que você nunca parou para pensar sobre isso, ou se devia ou não usar essas tags, sendo assim não existe razão para também não adotar todas as novas tags semânticas propostas pelo HTML5.

Anterior Cresce demanda por especialistas em banco de dados noSQL: 4Linux lança curso de MongoDB
Próxima Conheça a experiência de um Arquiteto de Software no mundo DEVOPS

About author

Você pode gostar também

Desenvolvimento

Descubra por que o PHP é a linguagem ideal para desenvolvimento web

O PHP é uma linguagem orientada a objetos, server-side, interpretada, com tipagem dinâmica voltada para WEB. Outras linguagens para WEB que você pode ter ouvido falar são ASP, Python e

Desenvolvimento

Rocket.Chat App: Criando seu primeiro aplicativo

Dando continuidade o nosso post anterior onde entendemos o que é um aplicativo do Rocket, o seu poder e como preparar o ambiente, agora criar o seu primeiro aplicativo. Espero

Big Data

Desvendando o Machine Learning: entenda o que é e como funciona

Afinal, o que é Machine Learning ? Atualmente, muito se discute sobre o aprendizado de máquina, Deep Learning e Inteligência Artificial, acredita-se que esses três termos são sinônimos, mas na