¿Qué son los atributos de datos HTML personalizados?

El atributo de datos se usa esencialmente para el almacenamiento de datos privados de una manera accesible, principalmente de una de dos maneras:

A través de secuencias de comandos:

Puede almacenar datos JSON en un atributo de datos y las bibliotecas como jQuery pueden acceder a ellos directamente. Por ejemplo, con:

Haga clic en mí

… puede acceder a una propiedad como $(“#foo”).data('effect').delay directamente

A través de CSS:

Puede orientar elementos por un atributo de datos para darles sus propios estilos.

* [efecto de datos] {
color de fondo: amarillo;
}

… hará que cualquier elemento que contenga el atributo de data-effect se represente con un fondo amarillo.

También puede usar el atributo de datos para inyectar contenido visible en la página. Usando el ejemplo anterior, podría hacer algo como esto:

* [información sobre herramientas de datos] {
posición: relativa;
}
* [información sobre herramientas de datos]: después de {
pantalla: ninguno;
}
* [información sobre herramientas de datos]: pasa el mouse: después de {
bloqueo de pantalla;
posición: absoluta;
arriba: -15px;
izquierda: -5px;
acolchado: 3px;
radio de borde: 3px;
color de fondo: # 333;
color: #fff;
contenido: attr (información sobre herramientas de datos);
}

… para crear un efecto de información sobre herramientas mejorado que funcione sin JavaScript.

¡Feliz codificación!

¿No te refieres a los atributos de datos?

A veces puede necesitar un atributo en una etiqueta que no esté oficialmente definida para esa etiqueta. Los navegadores no se quejarán si solo define sus propios atributos y todo probablemente funcionará bien, pero cada vez que valide un documento en el que se use dicha etiqueta, el validador indicará un error y, técnicamente, el documento no será un HTML válido documento.

Por eso se definió el atributo de datos. Un validador ignora cualquier atributo cuyo nombre comience con datos.

Y quizás lo más importante, ningún atributo estándar futuro tendrá un nombre que comience con datos, por lo que no hay posibilidad de que su atributo personalizado algún día se vuelva a definir en una versión más nueva de HTML.