Todas as novidades do HTML5

O HiperText Markup Language ou simplesmente HTML, continua trazendo grandes contribuiç�es para o advento da internet, pois � o tipo de conte�do que mais trafega pela rede mundial de computadores. Apesar da enorme import�ncia para o mundo da informaç�o o HTML estancou na vers�o 4.0.1 desde 1999 e n�o acompanhou as din�micas mudanças que ocorreram nos �ltimos anos e para atender as necessidades careceu utilizar plugins externos como o flash player e outros. Mas felizmente, isso s�o coisas do passado, pois a W3C (World Wide Web Consortium) e a WHATWG (Web Hypertext Application Technology Working Group) disponibilizaram uma vers�o de teste que provavelmente ser� a nova cara do HTML. Esse artigo mostra as novas caracter�sticas dessa vers�o que, inclusive, j� tem suporte para algumas funcionalidades nos mais conceituados navegadores e brevemente ser� oficializado por definitivo como o HTML 5.

O que � HTML5

Surgido a partir de um cons�rcio entre a W3C (World Wide Web Consortium) e a WHATWG (Web Hypertext Application Technology Working Group), o HTML5 ser� o novo padr�o para a estruturaç�o e apresentaç�o de conte�do na Word Wide Web trazendo melhorias significativas com novas funcionalidades de sem�ntica e acessibilidade, al�m de melhorar o suporte aos mais recentes conte�do multim�dias.

As principais mudanças que a nova vers�o proporcionar� aos usu�rios s�o: Melhor tratamento de exceç�o, mais tags para substituir scripts, independ�ncia de plataforma e reduç�o da necessidade de plugins externos.

Relacionado: Crie Formul�rios com o HTML5

As novas caracter�sticas do HTML5

As novas caracter�sticas da vers�o 5 est�o ligadas diretamente as necessidades de suporte independente aos novos formatos de conte�do multim�dia, as novas funcionalidades de sem�nticas e acessibilidade. Apresentaremos elas a seguir.

a) Inclus�o do elemento canvas para desenho.

O elemento canvas foi inclu�do para permitir desenhar gr�ficos em uma p�gina web, tarefa essa que atualmente s� � poss�vel com a utilizaç�o de plugins externos.

O canvas � uma �rea retangular onde o usu�rio, via JavaScript, vai poder controlar todos os pixels, al�m de desenhar v�rios elementos gr�ficos como c�rculo, ret�ngulo, elipse, linha, texto, imagens, etc. Para usar um elemento canvas no documento, al�m da inclus�o da tag, temos que manipular o elemento via JavaScript:


	<canvas id="myCanvas" width="400" height="400"></canvas>

Inclus�o da tag


		<script type="text/javascript">
		var myCanvas = document.getElementById("myCanvas");
		var canvas =  myCanvas.getContext("2d");
		canvas.fill#FF0000";
		canvas.fillRect(0,0,100,100);
		</script>

Manipulaç�o do elemento com JavaScript

b) Inclus�o dos elementos v�deo e �udio para reproduç�o multim�dia

Outro motivo para integrar plugins externos � o uso de �udio e v�deo nas p�ginas web. Com a inclus�o de tags espec�ficas para este fim, a HTML5 d� suporte nativo para a reproduç�o de �udio e v�deo sem a necessidade de utilizar mecanismos externos. Para usar o elemento �udio ou v�deo, basta incluir a tag espec�fica no documento.


	<video width="100" height="100" controls="controls">
  	<source src="video.mp4" type="video/mp4" />
  	<source src="video.ogg" type="video/ogg" />
 	O seu navegador n�o suporta o formato.
	</video>

Elemento v�deo


	<audio controls="controls">
  	<source src="audio. mp3" type=" audio/mpeg " />
  	<source src="audio.ogg" type=" audio/ogg " />
	O seu navegador n�o suporta o formato.
	</audio>

Elemento �udio

c) Melhor suporte para armazenamento local.

O HTML5 oferece 2 novos objetos para armazenar dados localmente:

sessionStorage: Armazena dados durante uma sess�o ativa.
<script type="text/javascript"> sessionStorage. sobreNome ="Botelho"; document.write(sessionStorage. sobreNome); </script>
localStorage: Armazena dados sem limite de tempo
<script type="text/javascript"> localStorage.sobreNome="Botelho"; document.write(localStorage. sobreNome); </script>

d) Inclus�o de novos elementos de conte�do espec�fico.

Muitos elementos da vers�o 4.0.1 foram exclu�dos da nova vers�o, uns por nunca terem sido usados, outros por estarem obsoletos e outros por serem usados indevidamente. A nova vers�o traz novos elementos para proporcionar aos usu�rios uma melhor estrutura, desenho e conte�do multim�dia.

A seguir uma relaç�o dos novos elementos com sua descriç�o:

Tag	Descriç�o
<article>	Especifica um artigo qualquer
<aside>	Relaciona um conte�do ao redor.
<bdi>	Para texto que n�o esteja diretamente vinculado ao elemento pai.
<command>	Um bot�o, radioButton ou checkBox.
<details>
<summary>	Uma legenda ou resumo dentro do elemento detalhe.
<figure>	Para agrupamento de uma sess�o de conte�do stand-alone.
<figcaption>	Legenda para um elemento figura.
<footer>	Para um rodap� de um documento ou sess�o.
<header>	Para uma introduç�o de um documento ou sess�o.
<hgroup>	Para uma sess�o de cabeçalhos usando h1 para h6.
<mark>	Para textos que s�o destaques.
<meter>	Para uma mediç�o. Deve-se conhecer o valor m�ximo e m�nimo.
<nav>	Para uma sess�o de navegaç�o./td>
<progress>	Para mostrar o progresso de uma execuç�o.
<ruby>	Para anotaç�o rubi.
<rt>	Para explicar uma anotaç�o rubi.
<rp>	Mostra os navegadores que n�o suportam anotaç�o rubi.
<section>	Para uma sess�o de um documento como cap�tulos, cabeçalhos, rodap�s, etc.
<time>	Para definir um tempo e/ou data.
<wbr>	Quebra de linha.

e) Inclus�o de novos controles para formul�rio.

Uma car�ncia da vers�o 4.0.1 e a escassa quantidade de controles para formul�rio fazendo com que os desenvolvedores recorram as famosas bibliotecas JavaScript, muitas vezes incompat�veis com determinados navegadores.

Na vers�o 5 novos controles de formul�rio foram inclu�dos para facilitar a vida dos desenvolvedores.

S�o eles:

Tag	Descriç�o
<datalist>	Uma lista de opç�es de entrada.
<keygen>	Gera chaves para autenticaç�o de usu�rios.
<output>	Para diferentes tipos de sa�das, como a geradas por scripts.

Um dos remanescentes da vers�o 4.0.1, o elemento input, ganhou novos valores para o atributo type, fazendo com que o desenvolvedor ganhe maior controle sobre a entrada de dados pelo usu�rio.

S�o os eles:

Type	Descriç�o
tel	A entrada � um n�mero de telefone.
search	A entrada � um campo de busca.
url	A entrada � uma URL.
email	A entrada � um ou mais endereço de email.
datetime	A entrada � uma data e/ou hora.
date	A entrada � uma data
month	A entrada � um m�s.
week	A entrada � um dia da semana.
time	A entrada � uma hora.
datetime-local	A entrada � uma data e hora local.
number	A entrada � um n�mero.
range	A entrada � uma faixa de valores.
color	A entrada � uma cor em haxadecimal como #FF00FF.
placeholder	Especifica uma dica r�pida que descreve o valor esperado em um campo de entrada.

f) Total suporte ao CSS3

Para dar ainda mais liberdade � criatividade dos usu�rios o HTML5 d� total suporte a mais nova vers�o das famosas Cascading Style Sheets, ou simplesmente CSS. Com essa integraç�o as p�ginas webs podem receber os mais variados tipos de estilos como sombra nos textos e quadros, efeitos de transiç�o, quadro com cantos arredondados e v�rios recursos novos que o CSS3 oferece.

Suporte

Apesar da vers�o 5 n�o ter sido oficializada, v�rios navegadores continuam adicionando os novos recursos do HTML5 nas suas recentes vers�es. Dentre os navegadores podemos citar: Safari, Chrome, Firefox, Opera e Internet Explorer.

Conclus�o

Com a chegada da nova vers�o da linguagem de marcaç�o HTML s� temos a ganhar, pois al�m de contarmos com novos recursos que permitem uma maior estruturaç�o dos documentos, mais funcionalidades, independ�ncia de plataforma, tratamento de exceç�o e suporte nativo aos recentes conte�dos multim�dias, ainda podemos ficar livres dos inc�modos estresses que temos ao utilizar bibliotecas e plugins externos que nem sempre funcionam como deveriam nos navegadores distintos.

As Novidades do HTML5

Neste artigo apresento as principais novidades da nova versão da linguagem de marcação de hipertexto HTML, que já está disponível nos principais navegadores de internet com suporte quase que total.