HTML5 – A linguagem e suas novidades

.::.

Quando do lançamento do HTML4, o W3C iniciou a promoção de boas práticas na escrita dos códigos baseados em HTML, alargando as discussões sobre: (i) a separação da codificação conteúdo, que deve ser realizado utilizando o HTML, da especificação da apresentação, que deve ser realizada via CSS; (ii) assim como questões sobre acessibilidade.

Todavia a versão 4 do HTML ainda não fornecia uma boa estrutura semântica para o código, nem facilitava a manipulação de elementos Javascript ou CSS. O HTML5, por outro lado, possui várias regras de marcação e se baseia em APIs, que foram definidas pelo WHATWG, denominadas DOM Level 0 e que formão a base da nova arquitetura WEB. Ou seja, o HTML5 já fornece ferramentas que auxiliam o trabalho realizado por meio do CSS e do Javascript; ele permite que seja realizada a manipulação das características de seus elementos, mantendo, assim, a leveza e a funcionalidade de toda a estrutura.

Podemos considerar o HTML5 como sendo uma variação da versão anterior, ou seja, a 4.01, e desta forma continua especificando como os agentes devem lidar com “tags” antigas e descontinuadas, mas apesar de serem interpretadas pelos agentes, os desenvolvedores não devem mais utilizar as tags marcadas como obsoletas.

No passado, o HTML era utilizado na construção de páginas estáticas, hoje ele tem sido largamente utilizado no desenvolvimento das “Aplicações Web”, que tentem imitar as aplicações de desktop, em muitos casos estas aplicações se baseiam em Javascript, por este motivo o HTML5 expões novas APIs que facilitam a manipulação dos objetos da DOM, tornando o desenvolvimento mais ágil e fácil. As novas APIs estão sendo implementadas utilizando-se de padrões bem especificados.

Ao contrário do XHTML, por padrão HTML5 não é XML, ele é servido como sendo um arquivo “text/html”; mas ele pode ser serializado utilizando XML, neste caso temos o que chamam de XTML5, que possui todas as características do HTML5, mas exige uma sintaxe mais rígida, neste caso o arquivo deve ser servido como “MIME XML”.

Novidades desta nova versão

A versão 5 do HTML vem repleta de novas funcionalidades, várias delas focadas em melhorar o desenvolvimento de aplicações baseadas na Web; dentre as novas funcionalidades podemos destacar: (i) elementos de marcação com maior valor semântico, (ii) ferramentas para melhorar a experiência dos usuários e (iii) melhor suporta à multimídia e animação. Nenhuma outra versão, do HTML, incluiu tantas tags relacionadas à descrição do conteúdo, incluindo elementos para identificar cabeçalhos, rodapés, seções para navegação (contendo hyperlinks), sidebars, seções, artigos, barras de progresso e etc.

A partir desta versão não existe mais a necessidade do uso do Flash ou do Silverlight para exibição de áudio, vídeo e imagens vetoriais. O HTML5, permite o desenvolvimento de aplicações mais interativas sem a necessidade de plug-ins de terceiros.

Outra novidade é o suporte à “Web Sockets”, que permite que seja estabelecida uma conexão permanente com o servidor, eliminando a necessidade de constantes consultas e trocas de dados via “pooling”, desta forma, um pagina web pode estabelecer uma conexão via socket e a aplicação “back end” pode enviar “notificações” aos usuários.

Além do suporte à “Web Sockets”, a partir de agora, também temos suporte à “Web Storage” e APIs para “Web SQL Database”, que permite o desenvolvimento de aplicações que poderão armazenar seus dados inteiramente nas maquinas dos usuários/clientes.

Até a versão anterior do HTML, éramos forçados à utilizar Javascript e CSS para gerar vários controles de formulários, como os calendários, e selecionadores de cores, que atualmente são elementos nativos do HTML na versão 5.

Além de melhorara na usabilidade, sem a necessidade do uso de Javascript, outro benefício é o ganho em acessibilidade, uma vez que agentes de usuários como leitores de tela e outros tipos de navegadores poderão implementar os controles de forma apropriada. Com uso dos novos elementos semânticos, que facilitam a descrição das “áreas” do conteúdo, os leitores de tela podem facilmente consumir o conteúdo das páginas, pois o processo de “parsing” se torna muito mais simples, agilizando a vida dos usuários de tecnologias assistivas.

E com o uso do CSS Level 3, ou simplesmente CSS 3, podemos realizar muito mais utilizando muito menos códigos, tornando o processo de “estilização” de páginas HTML mais fácil, por exemplo, a inserção de sombras em textos e imagens, assim como adicionar gradientes pode ser realizado sem a necessidade do uso de imagens de “background” ou elementos adicionais.

Da mesma forma que a versão 5 do HTML traz novos elementos, ela também depreciou vários outros. Os elementos que foram descontinuados e que ainda são usados em nossas páginas antigas, devem ser, preferencialmente, removidos, assim como não deverão ser utilizados em páginas construídas utilizando o HTML 5. Mas apesar de terem sidos “depreciados” estes elementos continuarão a ser “renderizados” pelos navegadores.

Dentre os elementos que foram depreciados podemos destacar:

  • basefont
  • big
  • center
  • font
  • strike
  • tt
  • u
  • s
  • acronym
  • applet
  •  dir
  • frame
  • frameset
  • noframes

Além dos elementos descritos acima, alguns atributos também deixaram de ser validos; como por exemplo:

  • aling
  • link, vlink e alink
  • bgcolor
  • height e widith
  • scrolling do elemento iframe
  • valign
  • hspace e vspace
  • cellpadding, cellspacing e border das tabelas
  • target dos links
  • profile dos heads
  • logdesc das imagens e iframes

Os “frames” foram removidos devido ao elevado número de problemas relacionados à usabilidade e acessibilidade que eles possuíam, mas o iframe continua sendo um elemento válido e útil.

Com todas estas mudanças, uma excelente ideia é validar nossas páginas web utilizando o “W3C Validator Service ” que ajuda a localizar tags e atributos depreciados, bem como outros erros em nossas páginas.