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:
[sourcecode lang=”html”]
<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>
[/sourcecode]
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.
[sourcecode lang=”html”]
<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>
[/sourcecode]
Outro recurso interessante e poderoso é o canvas, que possibilita desenhar utilizando javascript. Para criar um canvas basta utilizar a tag <canvas> por exemplo.
[sourcecode lang=”html”]
<canvas id="exemploCanvas" width="200" height="200"></canvas>
[/sourcecode]
Aí é só desenhar com javascript:
[sourcecode lang=”html”]
<script type="text/javascript">
var c=document.getElementById("exemploCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#00FF00";
cxt.fillRect(50,20,100,75);
</script>
[/sourcecode]
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 :)…
