Atributos data
Ya que he visto bastante confusión (y discusión) entre algunos colegas de trabajo, sobre qué son los atributos data («data attributes«), aquí les dejo una guía práctica para entender un poco más sobre estos atributos de HTML5.
¿Qué son y para qué sirven los atributos data?
Hace unos pocos años, si queríamos guardar metadatos con respecto a la información que contenía un elemento (uso semántico) o a su comportamiento (manipulado con Javascript), utilizabamos (sobretodo) el atributo «rel», (en unos pocos casos) el atributo «class» y algunas otras veces incluíamos esta información en elementos escondidos con CSS.
Con la llegada de HTML5, ya no necesitamos de estas «soluciones a medias» para alojar información extra. En vez de eso, ahora podemos tener atributos hechos a la medida de nuestras necesidades, alojando los metadatos de una forma más apropiada.
Los atributos data son creados en la especificación de HTML5 con la intención de que los desarrolladores los usemos para alojar datos («data») que son privados a la aplicación o al sitio web, para los cuales no existe ningún otro atributo apropiado.
¿Cómo se forma un atributo data?
Es muy simple, un atributo data consta de un prefijo «data-» seguido del nombre que consideremos más apropiado para el valor que va a guardar, por ejemplo:
1 2 3 4 5 | <img id="miImagen" src="miImagen.jpg" alt="Texto alt" data-camara="Modelo de la cámara que utilicé" data-efecto="Efectos aplicados a esta foto" data-geo="Longitud y latitud" data-fecha="La fecha en que tomé la foto" /> |
De esta forma para lo que era una simple imagen, ahora incluímos más información (y podría agregar mucha más).
Estilos para un elemento con «data-*»
Si queremos estilizar un elemento según uno de estos atributos, lo hacemos facilmente utilizando el selector de atributos.
1 2 3 | img[data-efecto="3D"] { border: 2px solid #000; } |
De esta forma le damos un borde sólo a las imágenes que tengan un efecto 3D, todo esto sin el uso de clases.
Accediendo con Javascript
Una gran cantidad de librerías y/o plugins javascript, hacen uso de los «data attributes» ya que allí guardan información relativa al comportamiento que puede tener un elemento dado.
Para seleccionar elementos del DOM según su atributo data, utilizamos la nueva API de selectores:
1 | var imgsConEfecto = document.querySelectorAll('img[data-efecto]'); |
La variable «imgsConEfecto» contendrá un array de todas las imagenes que tienen el atributo «data-efecto».
Si lo que queremos es acceder a dichos metadatos con javascript puro (sin frameworks como jQuery o Prototype), podemos hacerlo utilizando la API Dataset, de la siguiente manera:
1 | var camara = document.getElementById('miImagen').dataset.camara; |
La variable «camara» contendrá el valor del atributo «data-camara» que tenga el elemento con id «miImagen».
Para hacer lo mismo pero con un framework como jQuery, simplemente utilizamos el método data().
1 | var camara = $('#miImagen').data('camara'); |
Conclusión
Los atributos data pueden ser de gran ayuda al momento de guardar datos. Sin dudas estos nuevos «atributos a medida» son la forma apropiada de alojar metadatos, y nos evita tener que recurrir a soluciones con atributos como «rel» o «class» que fueron creados para guardar valores con otro objetivo.
Si a esto le sumamos que semanticamente pueden llegar a ser muy útiles, y además son muy fáciles de acceder con Javascript, esto los convierte en algo que facilita nuestro código diario y lo hace de mejor calidad.
Donate To Address
Donate Via Wallets- Bitcoin
Ethereum
Bitcoin cash
Tether
Stellar
Bitcoin!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Bitcoin. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Bitcoin
Ethereum!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Ethereum. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Ethereum
Bitcoin cash!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Bitcoin cash. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Bitcoin cash
Tether!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Tether. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Tether
Stellar!
Si el artículo te resultó útil, no dudes en colaborar con nosotros con Stellar. Escanea el código QR o copia la siguiente dirección en tu wallet para enviar Stellar
Please Add coin wallet address in plugin settings panel
14 comentarios para “Atributos data”
Dejar un comentario
¿Quieres saber más?
¡La mejor información en tu correo!
(proximamente importantes novedades)
Muy buena información, Saludos!!
Muy bueno y muy ben explicado, te felicito, esto no lo sabia. 🙂
¡Muchas gracias!
Me ha servido bastante.
¡Saludos!
Muy buen resumen de los atributos data.
Enhorabuena.
Es cierto, estos atributos han hecho que el trabajo sea mucho más sencillo a la hora de guardar datos relacionados a determinado elemento, y si usamos jQuery pues es muy sencillo obtener tales datos
Excelente explicación, gracias
Buen artículo
Excelente. Venia empleándolos como explicas aquí y no estaba seguro de su uso. Seguiré empleandolos.
Gracias.
Buen Artículo
Muy buena la explicación, por favor podrías dar un ejemplo de como presentar la información a la que accedimos .
Por ejemplo si tengo una pregunta de si o no la data sería la selección que tomo el espectador.
Y esa data proyectarla en una segunda página.
Gracias por tu ayuda.
Muy buena información.
Gracias por la explicación
tengo una pregunta importante, resulta que tengo una ventana modal y ya he logrado pasar variables por url y manejar el tipo de peticion get para obtener datos de una url, pero tengo una duda de como facebook en la lista de amigos donde algun amigo tiene amigos en comun en la url en ejemplo 9 amigos en comun , en esa url cuando uno da click sobre ella se abre la ventan modal pero no se obtienen datos por url porque en la barra del navegador se nota que no hay url que se reciban con get, la pregunta es , esa url de alguna manera debe contener el id del usuario para poder listar en la ventana modal contenido dinamico que seria la lista de amigos en comun.
Como facebook lo hizo ?
David, no solo puedes pasar parametros por GET (URL), también puedes por Cookies, POST o SESSION, ests 3 no son vistos en la URL, la variable SESSION es imposible verse verse, esta guardado en el servidor.
Lo mas seguro que facebook use SESSION para saber tu ID y con eso filtra de la Bases de Datos tus amigos..
algo asi como SELECT * FROM personas WHERE amigos LIKE $_SESSION[‘ID’]
Muy clarito todo. Gracias.