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.

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.