El único requerimiento es que el nombre del atributo de la etiqueta debe empezar por data-
Así, esto es válido en html5:
E incluso podemos pasar datos en formato json:
Realmente útil y además valida.
Hey!, muy guay! ¿Pero qué hay acerca del tratamiento de estos atributos en la hoja de estilos?. Pues también mola porque podemos tratar los data- como cualquier otro atributo.
Vamos a saludar el santo a todos clientes que se llamen Pepe con CSS:
Rodrígez Pérez, José
Y la hoja de estilo:
div[data-nombre="Pepe"] {
background-color: red;
}
div[data-nombre="Pepe"]:after {
content: attr(data-saludo);
}
Para saber más:
htmldoctor
tutsplus