Atributos globales en HTML5, explicación del atributo global data-*.
data-*
El atributo data-*, se utiliza para almacenar datos privados que pueda utilizar el documento u aplicación web.
Este tipo de atributo permite la posibilidad de insertar datos personalizados en cualquiera de los elementos HTML del documento web.
Este tipo de dato, luego pueden ser utilizados por lenguajes como javascript, para interactuar con el usuario en el documento web que se visualiza.
Los nombres de atributos de datos especificados de esta forma se han de teclear en letras minúsculas.
La sintaxis del atributo es la siguiente:
<p data-nombre-dato=”valor dato”>Texto del párrafo</p>
El siguiente ejemplo muestra el uso del atributo en un documento web utilizando un elemento HTML tipo lista.
<!DOCTYPE HTML>
<html>
<head>
<title>Ejercicios prácticos HTML5</title>
<meta charset="utf-8">
<meta name="author" content="José Sáez">
<meta name="description" content="Ejercicios prácticos HTML5">
<meta name="generator" content="Curso práctico HTML5">
<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5">
</head>
<body>
<ul>
<li data-tipo-curso="web">Curso práctico HTML5</li>
<li data-tipo-curso="ofimática">Curso práctico Word</li>
<li data-tipo-curso="internet">Curso práctico Outlook</li>
</ul>
</body>
</html>
El resultado del ejercicio anterior en el navegador ha de ser similar al que se muestra a continuación.
Gracias por vuestra visita y un saludo!!!