HTML5 e a semântica

Olá pessoal, tudo certo?

Uma das primeiras características que reparei no HTML5 foram as novas tags que trazem uma semântica mais aprimorada as páginas desenvolvidas. Pouco tempo atrás a criação das marcações de um layout era limitada por algumas tags. Com o uso do HTML5 é possível criar layouts mais semânticos e bem elaborados com a introdução das novas tags.

Se você parar para ver alguns códigos HTML de pouco tempo atrás não é difícil encontrar algumas marcações como as seguintes:

Estas marcações não estão erradas, porém, não possuem uma semântica. Para tudo se usa div, ou seja, é como se a página fosse uma folha cheia de recortes (divisões). O problema é que a tag div não possui um valor semântico, ela representa simplesmente uma divisão, e bem, uma divisão pode conter qualquer coisa.

O complicado no uso da tag div é que o navegador não consegue reconhecer se algum elemento pode ou não ter certa prioridade sobre os demais devido ao seu valor semântico. O mesmo ocorre com os mecanismos de busca, se a página é composta apenas por divs, é complicado encontrar os elementos desejados de uma forma mais rápida, ou seja, teoricamente os algoritmos devem percorrer toda a página atrás de links ao invés de recorrer apenas à elementos que podem conter os links desejados.

O HTML5 trouxe algumas tags que tornam a marcação HTML mais semântica, ou seja, é possível dividir uma página em partes que possuem significados. Segue o exemplo acima escrito com tags introduzidas pelo HTML5.

Neste exemplo um mecanismo de busca poderia buscar diretamente pela tag nav sabendo que ali teriam links de navegação, assim não havendo a necessidade de varrer toda a página procurando por estes links.

Além de benefícios para o navegador e mecanismos de busca, acredito que um dos grandes benefícios de uma marcação HTML mais semântica é a legibilidade. É muito mais fácil para uma pessoa que não está acostumada com um padrão entender <footer>&nbsp;</footer> do que <div class=”ct parte-de-baixo”>&nbsp;</div>.

E você, quais os prós ou contras que você vê com as novas tags introduzidas pelo HTML5?

Link para o gist

Referências

HTML5Doctor FlowChart

Role-Attribute

Section element

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s