Con la llegada de HTML5 vinieron muchísimas mejoras, entre ellas, la posibilidad de crear nuestros propios atributos en cada etiqueta HTML. Para el desarrollador y el diseñador web que se preocupa por hacer un código legible, fácil de entender y que cumpla con los estándares de la W3C, esto es un enorme avance.
Gracias a la presión que ejercía la comunidad web, en HMTL5 se incluyó la posibilidad de crear nuestros propios atributos en las etiquetas HTML sin tener que incluir un DTD externo (lo que además no cumpliría con los estándares de la W3C). La importancia de esto radica es que ahora se puede evitar el exceso de clases en las etiquetas, y usar los nuevos atributos para definir estilos o funcionalidades diferentes.
El Problema
Antes, si uno no quería verse forzado a utilizar exceso de clases o ids, tenía que crear atributos como:
ó
Sin embargo, esto hacía que la página que se estaba contruyendo no fuera válida ante el W3C, afectando su despliegue en los navegadores y el posicionamiento en buscadores. Además, si la clase “myaction” era solamente utilizada para ejecutar acciones javascript, se tornaba confuso buscar la clase entre las definiciones CSS y no encontrarla.
La Solución
Ahora podemos definir los atributos de la siguiente forma:
Separando claramente las clases, los identificadores y nuestros atributos personalizados, que siempre serán precedidos por el texto “data-”
El Código
Pero, ¿Cómo hacemos una llamada a una acción javascript usando atributos personalizados? Simple:
//usando la librería JQUERY
$("[data-action='myaction']").click(function(){
return confirm('¿Está seguro?');
});
Los desarrolladores y diseñadores web deben incluir los atributos personalizados entre sus mejores prácticas. Es simple y sencillo, pero tremendamente funcional para hacer sitios web más estándar, que sean más fáciles de mantener y actualizar.
