Todo lo que necesitas saber sobre el atributo de datos HTML5

El atributo de datos HTML5 permite asignar datos personalizados a un elemento. En este artículo se examina cómo usarlo y se proporcionan ejemplos de cuándo se usaría idealmente.

Introducción

Antes de HTML5 teníamos que confiar en el uso de atributos 'class' o 'rel' para almacenar pequeños fragmentos de datos que podríamos usar en nuestros sitios web. Esto a veces dio lugar a problemas y podría causar conflictos entre el estilo y la funcionalidad de los sitios web. El advenimiento de HTML5 introdujo un nuevo atributo conocido como 'data'. En este artículo voy a presentar algunos ejemplos de cómo usaríamos este atributo, así como cómo se debe usar correctamente.

A medida que los sitios web se basan cada vez más en datos y se van asemejando más a las aplicaciones, están empezando a contener más datos sobre elementos específicos. Tomemos, por ejemplo, el caso de que estuviéramos creando una aplicación de audio. Podríamos tener marcado estándar como el siguiente:

1

<audio controls="controls">

2

  <source src="track1.mp3" type="audio/mpeg" />

3

</audio>

El marcado anterior es perfectamente aceptable, pero es posible que en ocasiones deseemos almacenar más información sobre cada pista de audio aparte de la original. Por ejemplo, es posible que deseemos poder asignar otra información específica de la pista, como la duración, el tempo y el artista. Podríamos hacer esto asignando atributos de datos personalizados a cada fuente de audio, como por ejemplo:

1

<audio controls="controls">

2

  <source src="track1.mp3" type="audio/mpeg" data-duration="1min5secs" data-tempo="125bpm" data-artist="The Beatles" />

3

</audio>

Al proporcionar estos atributos de datos personalizados, podemos realizar tareas como las búsquedas, el filtrado o la agrupación dentro de nuestra aplicación según la duración, el tempo o el artista de las pistas utilizando sus valores asociados.

Cómo utilizar el atributo data

El nombre de un atributo de datos debe comenzar por la cadena 'data-' y debe contener al menos un carácter después del guión mediante cualquier convención de nomenclatura HTML.

La especificación W3C para los atributos de datos indica que:

Los atributos de datos personalizados están diseñados para almacenar datos personalizados privados en la página o aplicación, para los que no existen otros atributos o elementos adecuados.

Esto significa que sólo debemos utilizar esos datos internamente dentro de nuestra aplicación y no deben utilizarse para mostrar la información a nuestros usuarios. También es importante tener en cuenta que puedes asignar cualquier cantidad de atributos personalizados a un elemento con cualquier valor.

¿Cuándo debería usar el atributo de datos?

Ya hemos visto cómo puedes usar el atributo de datos, pero para obtener una comprensión clara, echemos un vistazo a algunos ejemplos más.

Por suerte, Tuts+ ya ha publicado algunos detallados tutoriales con algunos ejemplos de casos de buen uso. Uno de los tutoriales analiza cómo puedes usarlos para aplicar estilo y mostrar burbujas de notificación de menú asignando el elemento de notificación en una etiqueta de anclaje. Esta vez el atributo de datos se utiliza para indicar el valor de burbuja de la burbuja de notificación.

1

<a href="#" class="pink" data-bubble="2">Profile</a>

En otro consejo rápido también podemos ver cómo se utiliza como parte del marcado para una información contextual o "tooltip".

1

<a href="#" class="tooltip" data-tip="this is the tip!">This is the link</a>

Esta vez se utiliza para mostrar el texto de la información para el tooltip.

¿Cuándo no debería usar el atributo de datos?

No debemos usar atributos de datos para nada que ya tenga un atributo previamente establecido o más adecuado. Por ejemplo, sería inapropiado usar:

1

<span data-time="20:00">8pm<span>

Cuando podríamos usar el atributo datetime ya definido dentro de un elemento time como se muestra a continuación:

1

<time datetime="20:00">8pm</time>

Los atributos de datos no deben utilizarse como alternativa a los metadatos o micro formatos. Los microformatos están diseñados principalmente para los humanos y se introdujeron para proporcionar contexto a nuestro marcado. Por ejemplo, si tienes una Vcard que proporciona información de contacto sobre una persona u organización, le asignarías una clase de 'vcard' para que las máquinas entiendan que se trata de información de contacto.

Usando el microformato debes usar su marcado de la siguiente manera

1

<div class="vcard">

2

 <span class="fn " >Aaron Lumsden</span>

3

</div>

En lugar de utilizar el atributo de datos como

1

<div class="vcard">

2

 <span data-name="Aaron Lumsden " >Aaron Lumsden</span>

3

</div>

Para aprender más sobre los microformatos, puedes visitar Mircorformats.org.

Uso de atributos de datos con CSS

Una vez que hemos implementado atributos de datos dentro de nuestro marcado HTML, podemos dirigirnos a ellos mediante CSS. Es importante tener en cuenta que no debes usar atributos de datos directamente para el uso de estilos, aunque en algunos casos puede ser apropiado. La segmentación de atributos de datos en CSS es similar a la segmentación de otros atributos, puede usarlos simplemente de la siguiente manera:

1

[data-role="page"] {

2

  /* Styles */

3

}

Si, por ejemplo, estás creando un sitio o aplicación amigable con varios dispositivos, es posible que desees dirigirte a algún contenido específico que solo deba ser visto en dispositivos móviles. Toma el siguiente marcado

1

<div data-role="mobile">

2

Mobile only content

3

</div>

Usando CSS, podrías ocultar todas las páginas que sean únicamente para móviles cuando estas sean visualizadas en un escritorio.

1

div[data-role="mobile"] {  

2

  display:none;  

3

}

Aunque no se recomienda ocultar el contenido en función del dispositivo de visualización, pueden existir algunos casos en los que sea apropiado. Debes basar esto en cada circunstancia y caso individual.

También es posible utilizar los datos del atributo y mostrarlos a través de CSS. Aunque la especificación indica que no debes usar los datos del atributo personalizado para mostrar a los usuarios que se puede hacer y, en algunas circunstancias, probablemente sea el mejor método. Así es como se logra.

1

<div class="test" data-content="This is the div content">test</div>​

En CSS, usarías el pseudoelemento ':after' (o algún otro contenido generado) y usarías el atributo como parte del contenido 'after' de la siguiente manera:

1

.test {

2

  display: inline-block;

3

}

4

5

.test:after {

6

  content: attr(data-content);

7

}

Esto mostraría 'This is the div content' (Este es el contenido div) en el div '.text'.

Uso de atributos de datos con jQuery

Ahora hemos visto cómo puedes dirigir elementos con el atributo de datos mediante CSS, echemos un vistazo a cómo puedes obtener esos datos mediante jQuery.

Nota: El procesamiento de los datos está fuera del ámbito de este tutorial, ya que este tutorial está dirigido específicamente a desarrolladores y diseñadores front-end.

Existen algunas maneras en que podemos obtener los datos del elemento mediante jQuery. Echemos un vistazo a algunos de esos métodos.

1

<a href="http://www.google.com" class="button" data-info="The worlds most popular search engine">Google</a>

Si tuviéramos una etiqueta de anclaje, como la anterior, que tuviera un atributo de datos de data-info, entonces podemos acceder a esos datos de la misma manera que obtendríamos cualquier otro valor de atributo.

1

$('.button').click(function(e) {

2

   e.preventDefault();

3

   thisdata = $(this).attr('data-info');

4

   console.log(thisdata);

5

 });

Puedes probar esto abriendo la consola js en tu inspector web y, a continuación, pulsar el enlace.

Lo bueno del atributo de datos es que también podemos usarlo para proporcionar datos json como este.

1

<a href="google"  class="button" data-info='{"foo":"bar"}'></a>

Con jQuery podemos obtener estos datos mediante el método de objeto de datos de jQuery.

1

$('.button').click(function(e) {

2

   e.preventDefault();

3

    thisdata = $('div').data('info').foo;

4

   console.log(thisdata);

5

 });

A continuación, en el ejemplo anterior se registraría "bar" en el registro de la consola.

Soporte en distintos navegadores

Sé que antes de que te pongas demasiado mareado sobre el uso de este nuevo atributo vas a querer saber qué navegadores lo soportan y cuándo puedes empezar a usarlo. Bueno, la buena noticia es que es bastante compatible con todos los navegadores modernos. Cualquier cosa que admita HTML podrá acceder al atributo de datos. Si estás utilizando el atributo con fines de estilo, así como para acceder a los datos (utilízalo con precaución), el navegador tendrá que admitir selectores CSS3.

La mejor noticia, sin embargo, es que todos los navegadores (incluso IE7) te permiten utilizar ya el atributo data-* en los elementos y si estás utilizando jQuery 1.4 o superior, entonces puedes acceder a los datos utilizando el objeto de datos de jQuery. Sin embargo, si solo usas JavaScript, tendrás que acceder a los datos mediante el método 'getAttribute' de JavaScript.

Para obtener compatibilidad con la lista completa del conjunto de datos, puedes consultar canIuse.com.

Conclusión

A medida que los sitios web y las aplicaciones web se vuelven más complejos y comienzan a contener más información y datos, este nuevo atributo es definitivamente una adición bienvenida a la caja de herramientas. Actualmente lo he utilizado en bastantes ejemplos del mundo real y he encontrado una manera muy útil de proporcionar un sitio web más responsivo (más rápido) ya que los datos que de otro modo habrían tenido que ser extraídos del servidor ahora se pueden generar en el marcado y se utilizan cuando sea necesario.

En resumen, si te adhieres a las tres reglas siguientes, puedes asegurarte de estár utilizando el nuevo atributo de la manera más eficaz y semántica.

1. Utilízalo únicamente para uso interno en tu sitio web / aplicación. No debería, por ejemplo, ser utilizado en una fuente XML/RSS para su uso en sitios web o aplicaciones externos.
2. No lo uses solo para el estilo CSS.
3. No lo uses para reemplazar un atributo o elemento existente que sea más semántico o apropiado.

Ahora que tienes una comprensión más profunda del atributo de datos HTML5 y cómo se puede utilizar, te animo a empezar a implementarlo hoy mismo en tus proyectos.

¿Lo has usado en algún ejemplo del mundo real? ¿En qué escenarios lo has utilizado? ¿Te está ahorrando tiempo o hay algo que te gustaría ver extendido con este atributo? Házmelo saber en la sección de comentarios que viene a continuación.