Como todos já sabem o HTML5 será a próxima geração do HTML. Tivemos grandes mudanças (facilitadoras) do HTML4 para o XHTML e agora com a chegada do HTML5 a tendência é só melhorar. Apesar de ele ser novo, os browsers mais modernos já estão com suporte ao HTML5.

Algumas das promessas do HTML5 são:

• Reduzir a necessidade de plugins externos (como o Flash)
• Melhor manipulação de erro
• Mais marcação para substituir o script
• HTML5 deve ser independente do dispositivo

No tópico Mais marcação para substituir o script encontrei um atributo muito interessante, o data-* que serve para adicionar metadados na sua tag.

Ou seja o data-* permite definirmos nossos próprios atributos da tag…

Por exemplo, se estivéssemos desenvolvendo um HTML para a página de comentários de uma foto (como nos sites de relacionamento) seria perfeitamente válido fazer algo desse tipo:

 HTML | 
 copy code |
?
 
1
<li class="comentario" data-nome="Maurício Faustino" 
2
data-cidade="Brasília" data-estado="DF"
3
data-pais="Brasil" data-lang="pt-br">
4
  <b>Maurício Faustino disse:</b> <span>Muito bonita essa foto!</span>
5
</li>

Nesse código criamos nossos atributos de metadados do comentário, como o nome, cidade, estado, país e língua em que o autor postou a mensagem.

A vantagem disso é que além do código ficar mais limpo e intuitivo podemos utilizar esses atributos tanto no CSS quanto no Java Script.

Se nós quisermos colorir cada comentário com as cores do país do autor basta fazer isso:

 CSS | 
 copy code |
?
 
1
.comentario [data-pais=Brasil] {
2
	color: yellow;
3
	background-color:green;
4
}
5
.comentario [data-pais=Japao] {
6
	color: red;
7
	background-color:white;
8
}
9
...

O que antes era feito enchendo as tags de classes, agora é possível utilizando a tag data-*

Outra aplicação é no javascript, temos acesso a esses atributos, podendo inclusive altera-los.

No JQuery, utilizamos a função $(elemento).data() para usar e modificar esse atributo.
Assim podemos fazer algo do tipo:

 Javascript | 
 copy code |
?
 
1
$(".comentario").click(function() {
2
	if($(this).data("pais")=="Brasil") {
3
		alert("Comentário de um Brasileiro");
4
	}
5
});

Assim podemos ver que o HTML5 veio para ajudar e facilitar!

Fique a vontade para fazer comentários, críticas e sugestões sobre o post...