Ao construir páginas web, usamos uma combinação de HTML não semântico e HTML semântico. A palavra semântica significa “relacionada com o significado”, portanto, os elementos semânticos fornecem informações sobre o conteúdo entre as tags de abertura e fecho.
Ao trabalhar com HTML semântico, selecionamos os elementos HTML com base no seu significado e não em como são apresentados. Elementos como <div> e <span>, por exemplo, não são elementos semânticos, pois não fornecem contexto sobre o seu conteúdo.
Por exemplo, em vez de usar um elemento <div> para as informações de cabeçalho, recorremos a um elemento <header>, que é utilizado como uma secção de cabeçalho. Usando uma tag <header> em vez de <div>, fornecemos o contexto sobre as informações que estão no interior dessa tag.
Porque devemos usar HTML semântico?
- Acessibilidade: O HTML semântico torna as páginas web acessíveis para dispositivos móveis e também para utilizadores com limitações. Isto porque os leitores de ecrã e browsers podem interpretar melhor o código.
- SEO: Melhora o SEO do site. Com um SEO melhor, os motores de busca identificam mais eficientemente o conteúdo de um site.
- Fácil de entender: o HTML semântico também torna o código-fonte do site mais fácil de ler para outros programadores.
Para entender melhor, podemos comparar o HTML não semântico a um supermercado sem placas nos corredores. Sem os corredores devidamente identificados, não temos forma de saber quais os produtos que poderemos encontrar nos mesmos. Por outro lado os supermercados que possuem sinalização em cada um dos seus corredores tornam muito mais fácil encontrar os artigos que procuramos, tal e qual como no HTML Semântico.
Semantic HTML cheatsheet: https://www.codecademy.com/learn/paths/web-development/tracks/learn-html-web-dev-path/modules/learn-semantic-html/cheatsheet
Fonte: @codeacademy.com
Clique para subscrever a newsletter semanal do LinkedIn.
