Introdução ao HTML 5

O HTML 5 é a nova especificação de HTML, XHTML e DOM que está sendo feita em conjunto pela World Wide Web Consortium (W3C) e Web Hypertext Application Technology Working Group (WHATWG). Ainda está em progresso, mas alguns browsers já possuem suporte parcial à essa especificação, como as últimas versões do Firefox, Chrome, Opera, Safari e Internet Explorer 9.

Essa especificação possui algumas características interessantes, como a redução da necessidade de plugins externos com o uso de tags de vídeo, áudio e desenho (canvas) já embutidas na especificação, armazenamento offline, além de novas tags específicas para conteúdo como article, footer, header, nav, section e entrada de dados de calendário, data, hora, e-mail URL, busca.

Para estrutura melhor o conteúdo foram criados os seguintes elementos:

  • <article> - Utilizado para conteúdos externos, como por exemplo, blog, forum, notícias;
  • <aside> - Para conteúdo que adicional e relacionado (interno) à outro conteúdo;
  • <command> - Botão, radio ou checkbox;
  • <details> - Descrição de detalhes ou partes de um documento;
  • <summary> - Legenda ou sumário interno ao detalhe;
  • <figure> - Conteúdo periférico com legenda;
  • <figcaption> - Legenda da seção figure;
  • <footer> - Rodapé de um documento ou seção, pode conter nome do autor, data do documento, informação de contato, copyright;
  • <header> - Introdução de um documento ou seção, pode incluir navegação (nav);
  • <hgroup> - Seção de agrupamento de elementos de headings: <h1>, ..., <h6>;
  • <mark> - Para textos que devem ser destacados;
  • <meter> - Para medidas, utilizada somente quando é conhecido o valor máximo e mínimo;
  • <nav> - Seção para navegação;
  • <progress> - Indicador de progresso;
  • <ruby> - Ruby annotation;
  • <rt> - Descrição da ruby annotation;
  • <rp> - Conteúdo a ser exibido se o browser não tiver suporte ao ruby annotation;
  • <section> - Para uma seção em um documento como por exemplo capítulos;
  • <time> - Para definir uma data, hora ou as duas;
  • <wbr> - Quebra de linha;

Elementos de mídia:

  • <audio> - Para sons, música ou streams de áudio;
  • <video> - Para clips ou streams de vídeos;
  • <source> - Recursos de midia definidos dentro de um elemento de vídeo ou áudio;
  • <embed> - Conteúdo interno: plugins;

Elemento de desenho:

  • <canvas> - Para desenhar gráficos com script;

Elementos de formulário:

  • <datalist> - Lista de elementos para selecionar;
  • <keygen> - Gera chaves para usuários autenticados;
  • <output> - Para tipos diferentes de saída, como saídas feitas por javascript;

Elementos input type="?????":

  • tel - Valor de número de telefone;
  • search - Campo para busca;
  • url - Valor de URL;
  • email - Valor de e-mail;
  • datetime - Data e hora;
  • date - Data;
  • month - Mês;
  • week - Semana;
  • time - Hora;
  • datetime-local - Valor local de data e hora;
  • number - Valor numérico;
  • range - Intervalor número;
  • color - Cor em valor hexadecimal;

Exemplos

Caso queira obter detalhes sobre os atributos necessários e mais informações, consulte a especificação: http://www.w3.org/TR/html5/.

Para colocar um vídeo é só inserir a tag vídeo com o atributo src apontando para um vídeo do tipo ogg ou mpeg4.  Como no exemplo abaixo:

<video width="400" height="300" controls="controls">
 <source src="video.ogg" type="video/ogg" />
 <source src="video.mp4" type="video/mp4" />
 Browser sem suporte ao elemento de vídeo.
</video>

Caso o browser não tenha suporte a ogg, ele irá tocar o mp4 e se mesmo assim não tiver suporte ele irá mostrar o conteúdo "Browser sem suporte ao elemento de vídeo". Para tocar uma música o procedimento é semelhante, bastanto utilizar a tag audio, que deve ser no formato ogg, mp3 ou wav.

<audio controls="controls">
 <source src="musica.ogg" type="audio/ogg" />
 <source src="musica.mp3" type="audio/mpeg" />
 Browser sem suporte ao elemento de áudio.
</audio>

Outro recurso interessante e poderoso é o canvas, que possibilita desenhar utilizando javascript. Para criar um canvas basta utilizar a tag <canvas> por exemplo.

<canvas id="exemploCanvas" width="200" height="200"></canvas>

Aí é só desenhar com javascript:

<script type="text/javascript">
 var c=document.getElementById("exemploCanvas");
 var cxt=c.getContext("2d");
 cxt.fillStyle="#00FF00";
 cxt.fillRect(50,20,100,75);
</script>

Existem vários outros recursos interessantes, como armazenagem web (estilo cookie) e vários tipos input diferentes, mas ainda poucos browsers oferecem suporte à esses novos inputs, com exceção do Opera.
Para visualizar alguns desses recursos do HTML5, é só acessar o site do meu filho e visualizar o código fonte: http://daniel-vespa.appspot.com
Em breve novos posts utilizando HTML5. Esse é só o começo :)...

Sobre: Thiago Galbiatti Vespa

Thiago Galbiatti Vespa é mestre em Ciências da Computação e Matemática Computacional pela USP e bacharel em Ciências da Computação pela UNESP. Coordenador de projetos do JavaNoroeste, membro do JCP (Java Community Process), consultor Oracle, arquiteto de software de empresas de médio e grande porte, palestrante de vários eventos e colaborador de projetos open source. Possui as certificações: Oracle Certified Master, Java EE 5 Enterprise Architect – Step 1, 2 and 3; Oracle WebCenter Portal 11g Certified Implementation Specialist; Oracle Service Oriented Architecture Infrastructure Implementation Certified Expert; Oracle Certified Professional, Java EE 5 Web Services Developer; Oracle Certified Expert, NetBeans Integrated Development Environment 6.1 Programmer; Oracle Certified Professional, Java Programmer; Oracle Certified Associate, Java SE 5/SE 6