Conhecendo o atributo Data do HTML5

Aprendendo mais sobre atributos do HTML5: Atributo Data

Quando não havia este atributo, para manter certas informações usavamos e usamos atributos comuns como title ou rel, até mesmo criavam atributos não reconhecidos, mas que poderiamos manipular com JavaScript.

Um exemplo claro em que seria apropriado usar esse atributo são os tooltips, que em muitos casos, utilizamos o title para armazenar o texto a ser exibido.

Então, o que é o atributo Data?, em poucas palavras ... o atributo Data permite atribuir dados personalizados a um item/elemento.

Vejamos:

<!-- Usando o atributo title -->
<a href="#" title="Texto a ser mostrado">#</a>

<!-- Usando atributo data do HTML5 -->
<a href="#" data-tooltip="Texto a ser mostrado">#</a>

Como pode ver, com a chegada deste atributo podemos armazenar qualquer tipo de informação, caso quiséssemos guardar manter, por exemplo, os dados de uma faixa.

<audio controls="controls">
<source src="track1.mp3" type="audio/mpeg" data-tempo="95bpm" data-duracion="1:25" />
</audio>

Com Javascript poderiamos ordenar as faixas por sua duração ou velocidade de tempo. Este atributo foi feito para isso, nada mais que salvar os dados, e sua sintaxe é bastante simples: os data-nome-a-utilizar, deve sempre começaar com a palavra data e após o traço o nome que será usado.

Uso do atributo data com CSS

Já que sabemos para que e como se utiliza, podemos acessá-lo por meio de CSS, com algo tão simples como:

.teste {
display:inline-block;
}
.teste:after {
content: attr(data-conteúdo);
}

com o HTML

<div class='teste' data-conteudo=' - conteúdo'>
Teste
</div>

Obteremos isto:

Teste