HTML Semântico
Uma breve história do HTML
A linguagem de marcação evoluiu para o que temos hoje passando por algumas fases. A princípio, quando se fez necessário utilizar a rede de computadores para enviar documentos, os primeiros códigos fontes não se importavam com a referência semântica para as suas tag’s.
O HTML surgiu a partir do SGML (Standard Generalized Markup Language) uma metalinguagem que usada como base para criação de outras linguagens. Suas tag’s eram definidas através de um DTD (Document Type Definition) que especificava as instruções para o SGML, ou seja, definia uma gramática. Se analisarmos umas linhas de código em SGML, com um DTD rígido, no qual há tag’s de abertura e fechamento para cada elemento criando um hierarquia de elementos e outras propriedades necessárias, percebemos como sua marcação é mais complexa:
Esse código descreve uma figura. O mesmo código, mas com o DTD mais flexível para o usuário onde não seria necessário fechar todas as tag’s, temos 40% de redução na linguagem de marcação:
Para fazer uso dessa linguagem e declarar seus elementos é utilizado uma notação gramatical chamada de EBNF (Extended Backus-Naur Form) que é bastante críptica para não especialistas. Mas os tempos passaram, e surgiu o HTML como um facilitador para a linguagem de marcação, pois agora não seria mais necessário fazer um DTD para cada código, e programadores não precisariam ser tão especializados para o desenvolvimentos dessas tag’s, pois estas já estão predefinidas para aquela linguagem. Contudo, ainda não havia uma grande preocupação com a semântica no HTML. O que veio a ser uma grande revolução no surgimento da versão 5 dele.
Vejamos como seria esse mesmo exemplo em HTML 5:
Note a utilização da tag <figure> ao invés da utilização de <img>, que traz também a tag <figcaption> permitindo adicionar uma legenda na figura. Outra coisa a ser notada, é que para utilizar a tag <figure> é preciso informar a origem do arquivo (src — source) e também um atributo alt, este serve para que um robô de busca como o google search, possa identificar essa figura, fazendo uma melhor busca e indexação da página.
O HTML melhorou a marcação de elementos em relação ao SGML, contudo, sua herança do SGML, que eram tag’s complexas e com muitas linhas de códigos, precisou ser melhorada.
Curiosidade!
Ainda hoje é possível acessar o primeiro site feito com HTML:
http://info.cern.ch/hypertext/WWW/TheProject.html
No site do CERN também é possível ver um simulador do primeiro browser:
Estrutura de um site
Antes do HTML 5
Site são feitos para que o usuário possa identificar seus elementos de forma lógica, obedecendo uma cadeia de fluxo. Dificilmente, uma pessoa comum irá começar a ler uma página de baixo pra cima, da direta pra esquerda. Por isso, a estrutura e organização de uma página na web é fundamental.
Na figura ao lado podemos identificar partes como: cabeçalho, navegação, artigos e rodapé. Que, naturalmente, seguem um fluxo lógico de leitura, além desse, podemos ter outros layouts de estrutura, só que não podemos fugir da ideia que nosso site precisa ser para o usuário compreensível e fluído.
Antes do HTML 5, para fazer as divisões entre essas áreas era utilizado o atributo id na tag <div> para referenciar àquela região.
Por exemplo:
Nesse código acima, através da id todo o cabeçalho era estilizado. Quando não eram usadas id’s, as classes faziam essas referências. Para o usuário comum, não há diferença entre a utilização de id e de tag’s modernas do HTML 5. O problema está quando desabilitamos o CSS, como distinguir, no código HTML, cada parte do documento? Um usuário não visual, como o que citei acima (google search) não conseguirá fazer distinção do que é cabeçalho ou footer. Isso é importante, para um leitor de conteúdo para quem é cego, esse leitor não saberá diferenciar as partes da página.
Com o HTML 5
Na versão mais atual do HTML, sua estrutura de criação tem um princípio semântico. Para que o desenvolvedor possa marcar mais precisamente o conteúdo. Facilitando assim as leituras feitas por aqueles usuários que falei anteriormente. Quando fizermos uma busca no Google pelo nosso site, sua procura será mais precisa, pois, os elementos que utilizamos são entendíveis para buscadores.
Vejamos como ficaria aquela nossa página na versão 5:
Note que a quantidade linhas é a mesma da versão com <div>, contudo, quando utilizamos tag’s semânticas, nosso código pode ser compreendido sem o auxílio do CSS, ele fica claro e limpo. E dessa forma, na estilização CSS, bastaria apenas indicar a tag correspondente.
E os navegadores que não entendem as novas TAG’s?
Com HTML 5, trinta novas tag’s surgiram e outras mais surgirão, o que acontece com os navegadores mais antigos? Eles simplesmente não entendem essas tag’s e ainda pior, algumas tag’s melhoraram suas semânticas, exemplo da <img>, que possou a ser <figure>. A solução foi fazer uma gambiarra no código pra que os antigos elementos possam ser lidos. O script HTML5Shiv, criado por Remy Sharp, é uma solução. Basta baixa-lo ou chama-lo dentro da tag <head> através do código:
Por ser condicional, só será utilizado se o navegador for o Internet Explorer anterior a versão 9, ou o Firefox 2.
Conclusão
Por fim, esses recursos trouxeram muitos benefícios para os desenvolvedores de sites na web. Pois, deu mais ‘clareza’ ao código-fonte. Assim como, para leitores não visuais, facilitou o ‘entendimento’ de partes do conteúdo do código. Melhorou a indexação da página em mecanismos de busca.
Contudo, para que possamos escrever um HTML 5 é preciso ter conhecimento dessas novas tag’s para marcação, que não são poucas. Aqui, temos o site do MDN (Mozilla Developer Network) que contém todos os elementos do padrão HTML 5, nele encontramos as novas tags com uma imagem do HTML5 ao lado.
