En HTML 5, data-attributes le permite almacenar información que es invisible para los usuarios. En otras palabras, la información no es integrada o utilizada por el browser. En versiones previas de HTML, los datos son tradicionalmente almacenados en los atributos title, class, rel o id, o en elementos ocultos de HTML. La información almacenada en estos atributos es accesible por JavaScript. Existen muchas razones por las cuales acceder a estos atributos mediante JavaScript es útil; estos pueden ser utilizados por detrás para crear funcionalidades personalizadas o mostrar información al usuario con acciones determinadas. Un buen ejemplo del uso de datos personalizados en una página web es una galería de imágenes: el titulo y la descripción pueden ser agregados a la imagen y estas mismas pueden ser utilizadas por JavaScript para visualizar información acerca de la imagen que el usuario está viendo. Posiblemente no sea la mejor forma de utilizar estos atributos, pero es una solución válida. Afortunadamente, los desarrolladores pueden utilizar en forma correcta los atributos de HTML con el soporte de data-attributes
Más bien, en lugar de crear estos atributos con otros usos predeterminados, ahora puede crear atributos personalizados que son más relevantes para sus datos y aún así enviar HTML valido. HTML 5 soporta cualquier atributo que inicie con data- como un área para almacenar información. Cualquier nombre que pueda agregar a data- es válido. Por ejemplo, si agrega datos personalizados a la etiqueta de imagen en la galería de imagen, puede agregar data-title y data-description y proporcionarle valores personalizados.
| <img src=»image/img.jpg» data-title=»Mi imagen» data-description=»Descripcion de la imagen» /> |
La única restricción para los nombres de los atributos es que, al menos debe contar con un carácter y no puede contener letras en mayúscula.
El valor de los atributos puede ser cualquier cadena, y como siempre, debe incluirlo dentro de comillas.
Basado en el Libro: jQuery Mobile: Develop and Design ( Autor: Kris Hadlock )
