OHTML5 foi criado pensando na extensibilidade dos dados que precisam ser associados a um determinado elemento mas não necessariamente tem um significado definido.Atributos data-* nos permite armazenar informações extras em elementos HTML padrões e semânticos, sem a necessidades de hacks comoclassList, atributos fora do padrão, propriedades extras no DOM ou o método depreciadosetUserData.

Sintaxe HTML

A sintaxe é simples. Qualquer atributo de qualquer elemento no qual o nome do atributo inicia comdata- é um atributo data. Digamos que você possui um article e quer armazenar informações extras que não possuem nenhuma representação visual. Use atributos data para isso:

<article   data-columns="3"  data-index-number="12314"  data-parent="cars">  ...</article>

Acesso no JavaScript

Ler os valores destes atributos viaJavaScript é muito simples também. Você pode lê-los usandogetAttribute() com o nome html completo, mas a forma padrão provê uma alternativa mais simples: umDOMStringMap pode ser lido através da propriedadedataset.

Para obter o atributo data através do objetodataset, acesse a propriedade utilizando a parte do nome do atributo após o prefixodata- (note que o hífen é convertido para camelCase).

var article = document.getElementById("electriccars");article.dataset.columns; // "3"article.dataset.indexNumber; // "12314"article.dataset.parent; // "cars"

Cada propriedade é uma String e pode ser lida e escrita. No exemplo acima a atribuiçãoarticle.dataset.columns = 5 iria alterar esse atributo para "5".

Acesso no CSS

Note que os atributos data são atributos em HTML puro, e você pode inclusive acessá-los viaCSS. Por exemplo, para mostrar o elemento pai em um artigo, você pode usarconteúdo gerado em CSS com a funçãoattr():

article::before {  content: attr(data-parent);}

Pode-se também usar osseletores de atributos em CSS para alterar estilos de acordo com o atributo data:

article[data-columns="3"] {  width: 400px;}article[data-columns="4"] {  width: 600px;}

Pode-se tudo isso em funcionamento nesteexemplo JSBin.

Atributos data também podem ser utilizados para conter informações que mudam constantemente, como a pontuação em um jogo. Usando seletores CSS e acesso com JavaScript permite que se construa efeitos excelentes sem ter que escrever suas próprias rotinas de display. Vejaesta tela para um exemplo utilizando conteúdo gerado e transições CSS (exemplo JSBin).

Uma vez que valores data são strings, todos os valores devem estar entre aspas ou então a estilização não fará efeito.

Issues

Não armazene conteúdo que deve estar visível e acessível nos atributos data porque tecnologias assistivas podem não acessá-los. Além disso, motores de busca podem não indexar os valores dos atributos data.

Os principais issues a serem considerados são com suporte e performance no Internet Explorer. O Internet Explorer 11+ provê suporte para o padrão, mas todas as versões anterioresnão suportamdataset. Para suporte ao IE 10 e anteriores, deve-se acessar atributos data através degetAttribute() . E ainda, aperformance de leitura dos atributos data é ruim, comparada com o armazenamento em um data warehouse JS. O uso dedataset é até pior que a leitura dos dados comgetAttribute().

Apesar do que foi colocado, para metadados customizados associados a elementos, eles são uma ótima solução.

No Firefox 49.0.2 (e talvez em versões anteriores/posteriores), os atributos data que excederem 1022 caracteres não serão lidos pelo Javascript (EcmaScript 4).

Veja também

• Este artigo é uma adaptação deUsando atributos data em JavaScript e CSS no hacks.mozilla.org.
• Como usar atributos data em HTML5 (Sitepoint)