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.

atributo data

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
Nome

Básicos,3,Blogger,43,Botões,2,buscadores,3,Comentários,5,Css3,9,Design,3,Dominio,3,Downloads,2,Efeito,13,Facebook,3,Feed,1,Festividades,1,GooglePlus,6,Hacks,7,HTML,8,Imagens,8,Menu,3,Recursos,3,Seo,8,Truque,24,Twitter,2,Widget - Gadget,16,
ltr
item
Bloggermin: Conhecendo o atributo Data do HTML5
Conhecendo o atributo Data do HTML5
Aprendendo mais sobre atributos do HTML5: Atributo Data
http://2.bp.blogspot.com/-f0XpGlSwAKU/UVjCWA4c4LI/AAAAAAAAAzA/6dCHuZi97V4/s1600/datahtml5.png
http://2.bp.blogspot.com/-f0XpGlSwAKU/UVjCWA4c4LI/AAAAAAAAAzA/6dCHuZi97V4/s72-c/datahtml5.png
Bloggermin
https://www.bloggermin.cashmore.com.br/2013/04/conhecendo-o-atributo-data-do-html5.html
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/2013/04/conhecendo-o-atributo-data-do-html5.html
true
3085171147808187471
UTF-8
Carregado Todas os Posts. Não foi encontrado nenhum post. VER TUDO Leia mais Responder Cancelar resposta Excluir Por Home PÁGINAS POSTAGENS Ver tudo RECOMENDADO PARA VOCÊ ETIQUETA ARQUIVO PESQUISAR TODAS AS PUBLICAÇÕES Não foi encontrado qualquer correspondência postal com o seu pedido Voltar a Home Domingo Segunda-feira Terça-feira Quarta-feira Quinta-feira Sexta-feira Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora mesmo 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir O CONTEÚDO É PREMIUM Por favor, compartilhe para desbloquear Copiar Todo o Código Selecionar Todo o Código Todos os códigos foram copiados para a área de transferência Não é possível copiar os códigos / textos, por favor pressione [CTRL] + [C] (ou CMD + C com Mac) para copiar