A Semântica do HTML5

Dando significado para o código do seu website.

Nos primórdios da Internet, um website era desenvolvido usando tabelas para gerar um grid e diagramar o conteúdo na página. O tempo passou e vieram as atualizações no HTML. Com a inserção de novas tags de marcação na linguagem HTML tornou-se possível trabalhar de uma forma diferente das tabelas, que eram usadas antigamente. Surgia o conceito de Tableless (sem tabelas). Apesar desse conceito de desenvolvimento ser superior às tabelas, ele ainda tinha uma deficiência muito grande, a qual foi solucionada com o lançamento do HTML5: a semântica do código.

Agora que você já sabe o que é semântica, podemos voltar a falar de semântica HTML.

Com as tabelas era possível colocar qualquer conteúdo em qualquer parte do website. Depois das tabelas, surgiu a tag DIV que é largamente usada no Tableless, onde o uso de tabelas foi completamente abandonado. Mas a tag DIV não diz nada para o robô de busca, pois a tag significa apenas uma divisão (DIVision) na página. Dessa forma, todo o conteúdo de texto da página possui praticamente o mesmo peso semântico em todas as suas seções. Os robôs de busca não saberiam diferenciar que determinado conteúdo fazia parte do cabeçalho, artigo, barra lateral, menu ou rodapé. Tudo era indexado como um todo, visto que não era possível separar as seções do website.

Mas o HTML5 trouxe uma revolução em termos de desenvolvimento com suas novas tags semânticas. Agora é possível determinar no código do seu website o que cada seção representa, existem tags específicas para isso.

A imagem abaixo ilustra as tags usadas para criar seções no website antes do HTML5.

Repare que todas as divisões do website possuem o mesmo nome, não tendo significado algum no contexto geral. Nesse caso, os robôs de busca não sabem o que é um cabeçalho, menu, conteúdo, barra lateral ou rodapé. Pois o posicionamento de cada uma dessas DIVs é realizada pelo CSS e não pelo HTML. Aos olhos de um robô de pesquisa, essa página é apenas um emaranhado de textos, imagens e links.

A imagem abaixo ilustra as tags usadas para criar seções no websites depois do HTML5.

Nessa segunda imagem, é possível ver que cada seção do website possui seu respectivo nome, identificando para os buscadores que tipo de conteúdo está inserido em cada uma. Com isso, ele saberá o que é o cabeçalho, menu, conteúdo, barra lateral ou rodapé, pois agora há uma marcação semântica sendo feita no código HTML.

Veja que os 2 exemplos apresentam o mesmo resultado, pois o tamanho de cada seção do website é determinado pelo CSS e não pelas tags HTML. A diferença é que com o HTML5 é possível dar sentido para essas divisões da página. E isso ajuda muito um robô de busca quando indexa seu website. Agora ele tem como saber o que é cabeçalho (header), rodapé (footer), navegação (nav), conteúdo principal (main), barra lateral (aside), etc.

Sem dúvida alguma, esse foi um dos maiores avanços do HTML na versão 5: dar sentido para o código, possibilitando uma melhora na estrutura e indexação por robôs de busca.

E o seu website? Já está em HTML5?

Um website desenvolvido em HTML5 é considerado um website moderno para buscadores, pois possui a mais nova versão da linguagem sendo implementada, e a mesma fornece mais informações para indexação que a de websites desenvolvidos em versões anteriores. Isso faz com que os buscadores deem prioridade nos resultados de busca para websites em HTML5.

Como identificar se meu website é HTML5?

- Acesse seu website de qualquer navegador.
- Pressione Control + U no teclado para visualizar o código fonte.
- Pressione Control + F para abrir a barra de pesquisa.
- Digite algumas tags HTML5 e veja se existem no seu código: header, footer, main, section, aside.

Lembrando que, dependendo da página, não há necessidade de ter todas essas tags simultaneamente no código fonte. Mas quanto mais tags dessas encontrar, mais certeza você terá que seu website foi desenvolvido em HTML5.

Se desejar, podemos realizar essa inspeção no seu código. Entre em contato com a Ideatore para saber como podemos melhorar seu website para que ele seja melhor indexado pelos buscadores e possa atrair mais visitantes pela busca orgânica.

Tags

Gomes [Full-Stack Developer Senior]

gomes@ideatore.com.br

Eleito melhor Twitter de Design em 2011 pelo Shorty Awards em NY e 2º melhor desenvolvedor para Twitter pelo B2B Twiiter Of The Year. Prêmio de Talento Criação e Prata na categoria Website Institucional em 2005; Talento Webdesign e Prata na categoria Website Entretenimento em 2009 pela APP Ribeirão Preto. 3x Ouro em Email Marketing (2003, 2004, 2005) entre outros. Bronze no 14º Prêmio Recall de Criação Publicitária na categoria Website Entretenimento. Acha que é possível programar um mundo melhor.