Utilizando os Custom Data Attributes da HTML5

Veja neste artigo como utilizar os Custom Data Attributes, novo recurso inserindo na versão 5 da linguagem HTML para definir atributos customizados para as tags.

O que é o HTML5?

O novo e revolucionário HTML5 é, como o próprio nome já diz, a 5ª versão da linguagem HTML, e consigo trouxe novas funcionalidades e novos recursos, que antes só eram possíveis através de outras tecnologias. Se você estudar a fundo essas novidades encontrará tags como: <vídeo>, <áudio>, <canvas> e etc., esses são apenas alguns dos novos recursos. 

O W3C (World Wide Web Consortium) é o principal regularizador do HTML5 e junto a ele são definidas todas as regras ao se utilizar esta nova linguagem, incluindo as regras de utilização do Custom Data Attributes (que veremos mais abaixo).

Trataremos neste artigo de um recurso pouco conhecido, porém muito útil: os Custom Data Attributes. Mas afinal, o que seria isso? Para que serve? Vamos responder todas essas perguntas logo abaixo. 

Entendendo os Custom Data Attributes
Data Attributes no HTML5
Curso relacionado: Curso de Atributos para HTML5

Você já precisou recuperar valores de um LI, UL, DIV ou qualquer outra tag que não lhe dê a opção de retornar valores como as tags INPUT?  Bom, geralmente nesses casos os desenvolvedores optam por utilizar o atributo class, div ou até input[type='hidden'] para armazenar os valores. 

Exemplo sem Custom Data Attributes

Suponhamos que você tenha uma lista (LI) com o nome de vários pacientes e você precise armazenar a matrícula de cada paciente, de forma que você possa posteriormente capturar essa matricula via jQuery, por exemplo. Poderíamos fazer da seguinte forma:

Listagem 1: Exemplo de lista HTML com itens utilizando o atributo class

<ul> <li class="001" onclick="chamaJavascript(this)">Pedro</li> <li class="002" onclick="chamaJavascript(this)">João</li> <li class="003" onclick="chamaJavascript(this)">Kamila</li> </ul>

Parece simples com este exemplo simples, mas e se precisássemos armazenar vários atributos referentes ao paciente, como por exemplo: matricula, idade, sexo, data de nascimento, etc.? E se o atributo class já estivesse sendo utilizado por uma classe do CSS? Bom, nestes casos seria bem mais complicado (não impossível) armazenar esses dados nas tags.

 Custom Data Attributes na prática

Você já deve ter percebido que conforme a aplicação fica mais complexa e mais atributos devem ser armazenados em uma tag não convencional de armazenamento (li, ul, div...), a não utilização dos Custom Data Attributes faz com que o trabalho seja árduo e muito tempo seja perdido. 

A sua utilização é simples, mas muito eficaz. A regra é sempre usar o nome do seu atributo precedido da string "data-", ou seja, se o seu atributo será "matricula", o Custom Data Attribute será data-matricula, sempre com letras minúsculas.

Tomando o exemplo acima (1.1) da lista de pacientes, iremos agora armazenar os dados: matrícula, idade e sexo em uma mesma LI usando Custom Data Attributes.

Listagem 2: Lista HTML com itens utilizando data-attributes

<ul> <li data-matricula="001" data-idade="23" data-sexo="M" onclick="chamaJavascript(this)">Pedro</li> <li data-matricula="002" data-idade="28" data-sexo="M" onclick="chamaJavascript(this)">João</li> <li data-matricula="003" data-idade="33" data-sexo="F" onclick="chamaJavascript(this)">Kamila</li> </ul>

Agora fica fácil capturar a matrícula, sexo ou idade de determinado paciente quando o usuário clicar na LI deste. Veja o exemplo abaixo em JavaScript:

Listagem 3: Função JavaScript acessando os data-attributes dos elementos

function chamaJavaScript(componente){ var matricula = componente.getAttribute("data-matricula"); var idade = componente.getAttribute("data-idade"); var sexo = componente.getAttribute("data-sexo"); // Faça aqui o que desejar com os valores obtidos }

Mas afinal, porque eu devo utilizar o prefixo “data-*“ antes de criar um atributo customizado? Se eu não utilizar este prefixo meu atributo customizado irá funcionar? Estas são perguntas comuns que geralmente são feitas por quem já utilizou os Custom Data Attributes (mesmo que inconscientemente) sem o prefixo “data-*” e percebeu que funcionou normalmente. Você pode testar o código abaixo que funcionará normalmente.

Listagem 4: Utilização do Custom Data Attributes sem o prefixo “data-*”

<ul> <li matricula="001" idade="23" sexo="M" onclick="chamaJavascript(this)">PEDRO</li> <li matricula="002" idade="28" sexo="M" onclick="chamaJavascript(this)">JOÃO</li> <li matricula="003" idade="33" sexo="F" onclick="chamaJavascript(this)">KAMILA</li> </ul>

Listagem 5: Função JavaScript acessando os data-attributes sem o prefixo “data-*”

function chamaJavascript(componente){ var matricula = componente.getAttribute('matricula'); alert(matricula); }

Acontece que o interpretador HTML (Browser) não identifica como um “erro” a não utilização do prefixo “data-*”, mas sim como apenas um novo atributo que foi criado para aquela tag em específico. Para facilitar a compreensão, pense nos atributos da tag como métodos de determinada Classe, ou seja, ao criar um novo atributo para a tag DIV chamado “matricula” você estaria criando um método “matricula” para a classe DIV, onde o parâmetro será o valor da matricula a ser armazenado. O interessante aqui é que estes atributos vão funcionar como getters e setters da tag DIV.

Você notou que o problema não é sintático? Afinal o sistema continua funcionando normalmente mesmo sem o prefixo “data-*”. A grande questão para utilização deste prefixo é a padronização segundo a W3C. Assim como em toda área, padrões devem ser seguidos e fugir destes padrões significa trabalhar como amador.

A utilização do prefixo “data-*” não foi criada apenas para deixar o código mais bonito ou para criar um padrão aleatório ao qual todos devem seguir, a sua utilidade vai muito além: evitar conflitos entre atributos padrões da linguagem. Imagine que você resolve por não seguir o padrão e cria um atributo chamado “storage” em diversas Tags. Inicialmente tudo funciona como planejado, mas amanhã a linguagem HTML pode sofrer uma alteração onde agora todas as tags terão um atributo “storage” (por coincidência o mesmo nome que você havia escolhido) como padrão para armazenar a quantidade em bytes que aquele componente pode usar. Agora você terá que mudar o nome do seu atributo “storage” em todas as partes do seu código para evitar conflitos, imagine o trabalho. Se o nome fosse definido como “data-storage” (seguindo o padrão do W3C) esse problema seria evitado e com certeza não passariamos por nenhuma dor de cabeça futura.

Problemas mais comuns

Temos ainda um obstáculo a enfrentar antes de aplicar na prática em nosso projeto este novo recurso: a compatibilidade dos browsers com HTML5. 

Por não estar totalmente disseminada em todos os browsers, encontramos ainda problemas de compatibilidade. O ideal é que você avalie os usuários que utilizarão seu sistema e veja se a grande maioria ou a totalidade possui browser com suporte a HTML5.

Na Figura 1 abaixo temos uma tabela mostrando a compatibilidade dos Custom Data Attributes ou data-attributes com os browsers.


Figura 1: Tabela de Suporte dos Browsers ao data-attributes

A tabela possui uma linguagem de simples entendimento, onde para cada coluna (que representa um browser) são listadas todas as suas versões de forma crescente. As células com a cor verde claro representam as versões daquele determinado browser que possuem suporte total a data-attributes e as células com a cor verde escuro representam as versões daquele browser que possuem suporte parcial ao recurso. Sabendo disso, agora você pode realizar a analise se é viável ou não utilizar o recurso no seu projeto.

Links Úteis

Saiba mais sobre JavaScript ;)

  • Programando em HTML5:
    Ao ser anunciada a versão 5 do padrão HTML, inicialmente parte do mercado não recebeu com grande entusiasmo, acostumado a receber poucos recursos novos de uma versão para outra. A verdade é que, desde que a versão 4.0 foi lançada em 1997, poucos avanços aconteceram nos dez anos seguintes.
  • Comandos e tags HTML5:
    Se você precisa conhecer comandos, dicas e tags HTML5 acesse nosso conteúdo gratuito. Tudo sobre HTML5 você encontra no maior site para programadores do Brasil. Estude agora!
  • O que é o HTML5:
    Veja neste artigo um pouco da história do HTML, o que é o HTML5 e suas principais mudanças em relação às versões anteriores.

Artigos relacionados