Capítulo 3
O surgimento do HTML5 mudou muitas coisas no mundo do desenvolvimento web, com novos elementos, novas funcionalidades e diversas outras novidades que possibilitam experiências melhores e integrações que antes eram apenas desejos e sonhos dos desenvolvedores por aí. Mesmo com algumas funcionalidades ainda em processo de definição, já podemos aproveitar diversas das novidades que o HTML5 trouxe para o mundo.
Vamos passar por algumas delas, inclusive algumas que são referentes ao código que escrevemos: novos elementos, mudanças de sintaxe e atributos personalizados. Mas não deixe de conferir no capítulo 11 sobre por onde aprender mais a respeito de outras novidades.
Uma das minhas mudanças prediletas é como a tarefa de escrever HTML ficou mais simples. Diversos pontos pequenos se tornaram opcionais ou desnecessários e o que antes era repetitivo deixou de ser parte da nossa rotina e como consequência, o nosso código se torna mais simples e fácil de se ler.
Um ótimo exemplo disso é o Doctype do HTML5, a instrução que informa aos navegadores como ele deve processar o código HTML, que ficou bastante simples em relação aos seus antecessores. No HTML 4 ou no XHTML 1, a linha do Doctype é algo assim:
Dificilmente alguém vai conseguir lembrar de tudo isso, e geralmente deixamos a responsabilidade de escrever a linha do Doctype para ferramentas de geração de projetos ou de código. Agora, ele está tão pequeno que é bem fácil escrevê-lo de cor.
Não existe mais URL de dtd ou tipo de Doctype para se preocupar. Bastante simples!
Além disso, as tags de link e script também emagreceram um pouco. Agora, para referenciar arquivos de CSS e JavaScript, você não precisa mais informar o atributo type. Caso ele não esteja presente, o navegador irá assumir que o arquivo é do tipo text/css ou text/javascript.
Se você comparar os exemplos anteriores da tag link, pode notar que a barra no final da tag também não está mais presente — mais um detalhe que se tornou opcional no HTML5. Tags que não precisam ser fechadas, como link, input, img, br e meta, não precisam mais terminar em />, apenas >.
Em alguns casos precisamos adicionar metadados ou informações extras no nosso HTML, mas não queremos depender de elementos adicionais que não possuem valor de verdade em nossa página. Um exemplo muito comum, é fazer com que alguma biblioteca leia uma tag à procura de alguns atributos específicos, como por exemplo, um atributo indicando que a requisição de um link deve ser feita assincronamente via AJAX.
O atributo remote não existe na definição da tag a. Esta abordagem funcionaria em páginas de HTML 4, por exemplo, mas o seu código estaria inválido de acordo com a ferramenta de validação do W3C.
Uma forma de resolver isto são com atributos personalizados, que fazem parte do domínio do seu projeto e ao mesmo tempo mantêm o seu código válido. Por exemplo, para definir um link que irá apagar um post do seu blog, podemos utilizar algumas configurações via atributos personalizados com o prefixo data-*.
Desta forma, o seu JavaScript pode ler os atributos de data-* e executar o código necessário para apagar o post, pedindo uma confirmação do usuário com uma mensagem personalizada.
No campo da semântica existe um problema complicado de se lidar, que é o uso excessivo da tag div. Um verdadeiro coringa do HTML, que por ser um elemento genérico, acabamos utilizando para definir quase toda a estrutura das nossas páginas, desde o cabeçalho ao rodapé.
Embora isso nunca tenha impedido ninguém de colocar um site de sucesso no ar, acaba gerando um certo ruído e uma necessidade de se utilizar classes CSS para identificar o papel de cada div dentro do que criamos. Com isso, o HTML5 traz alguns elementos para suprir essa falta de tags mais semânticas e descritivas para alguns elementos clássicos em diversos cenários, como cabeçalhos, menus de navegação e áreas de conteúdo secundário.
Algumas das alternativas existentes são:
Um ponto crucial destas mudanças é que podemos definir diversas seções independentes entre si, cada uma com a sua hierarquia própria. Por exemplo, podemos ter 2 elementos h1, cada um em sua seção, ou podemos criar um header para o cabeçalho de um blog, com o título e links de navegação, e cada post, devidamente criado em um article, ter um header com o título do post e a data em que ele foi publicado, por exemplo. Isso pode ser bastante útil para se arquitetar páginas mais modulares, para melhorar a qualidade e a facilidade de manutenção do nosso código.
Nossa página O que eu mais gosto em São Paulo tem alguns pontos que podemos substituir o uso da tag div por alguns dos elementos novos do HTML5. Não teremos nenhuma mudança visual na página, apenas a semântica do código escrito irá mudar. A diferença no tamanho do arquivo ou na quantidade de código escrito é insignificante, então não vamos nos preocupar com isso.
Vamos começar pelo nosso conteúdo principal, os 3 lugares de São Paulo que são descritos com a classe .place. Podemos alterar esses elementos para utilizar a tag article, removendo a necessidade da classe para identificar estes elementos.
E claro, alterar o nosso CSS para refletir esta mudança, trocando onde antes usávamos a classe place pela tag article.
O próximo lugar que podemos alterar é o elemento com a classe .sidenote, a nossa barra lateral, que possui um conteúdo adicional ao que mexemos anteriormente. Um ótimo candidato a se tornar um aside.
Sem deixar de alterar o CSS, trocando as referências a classe .sidenote pela tag aside.
E por fim, o uso da classe .footer no nosso rodapé é outro caso óbvio de mudança.
Existem outros pontos que poderíamos mudar no nosso HTML: substituir a div com a classe .places por um section, e colocar um header em volta do título da nossa página h1, mas não precisamos chegar a tanto.
Nossos usuários não notariam esta mudança, mas estamos agregando mais semântica ao nosso código e facilitando a leitura dele, para manutenções futuras.
Quando um navegador não possui suporte a uma tag desconhecida para ele, o elemento é exibido na página, porém nenhum estilo é aplicado. É assim que versões antigas do Internet Explorer, por exemplo, tratam elementos novos como o section e o header. Se você for utilizar algumas dessas tags e precisa dar suporte a navegadores que ainda não entendem elementos novos do HTML5, a solução é utilizar um pouco de JavaScript para forçar a aplicação de estilo pelo navegador.
O script mais utilizado para isto é o html5shiv (https://github.com/aFarkas/html5shiv/), que além de tratar a aplicação de estilos nesses elementos, também trata alguns problemas relacionados a impressão da página que utilize tags do HTML5.
Enquanto este mundo de novas possibilidades e tags a nossa disposição pode parecer a solução, é muito fácil se perder no mérito das discussões e definições do tipo de "isto aqui deveria ser um article ou um section?". Continuar utilizar a tag div não causa mal nenhum, e você sempre pode voltar no seu código depois e trocar alguma tag por outra que você considere mais adequada. Divya Manian fala bastante sobre os problemas que essa busca incessante por semântica pode causar em um post na Smashing Magazine (http://coding.smashingmagazine.com/2011/11/11/our-pointless-pursuit-of-semantic-value/). O ponto importante é não perder o foco do que realmente precisamos fazer.
0 Comentários