Introducción

Los atributos de datos (data attributes) en HTML5 permiten almacenar información adicional en los elementos HTML sin necesidad de utilizar clases o identificadores adicionales. Estos atributos son útiles para almacenar datos personalizados que pueden ser utilizados por JavaScript para crear interacciones dinámicas en la página web.

Sintaxis de los Atributos de Datos

Los atributos de datos se definen utilizando el prefijo data- seguido de un nombre de atributo personalizado. La sintaxis general es la siguiente:

<elemento data-nombre="valor"></elemento>

Ejemplo Básico

<div data-user-id="12345" data-role="admin">Usuario Administrador</div>

En este ejemplo, el div tiene dos atributos de datos: data-user-id y data-role.

Accediendo a los Atributos de Datos con JavaScript

Para acceder a los atributos de datos en JavaScript, se utiliza la propiedad dataset del elemento. La propiedad dataset es un objeto que contiene todos los atributos de datos del elemento.

Ejemplo de Acceso a Atributos de Datos

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo de Atributos de Datos</title>
</head>
<body>
    <div id="user" data-user-id="12345" data-role="admin">Usuario Administrador</div>

    <script>
        // Seleccionamos el elemento
        const userDiv = document.getElementById('user');

        // Accedemos a los atributos de datos
        const userId = userDiv.dataset.userId;
        const userRole = userDiv.dataset.role;

        // Mostramos los valores en la consola
        console.log('User ID:', userId); // Output: User ID: 12345
        console.log('User Role:', userRole); // Output: User Role: admin
    </script>
</body>
</html>

En este ejemplo, seleccionamos el elemento div con el id user y accedemos a sus atributos de datos data-user-id y data-role utilizando userDiv.dataset.userId y userDiv.dataset.role, respectivamente.

Ejercicio Práctico

Ejercicio 1: Almacenando Información de Productos

Crea una lista de productos donde cada elemento de la lista tenga atributos de datos que almacenen información sobre el producto, como el id, el nombre y el precio. Luego, utiliza JavaScript para acceder a estos datos y mostrarlos en la consola.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Lista de Productos</title>
</head>
<body>
    <ul id="product-list">
        <li data-product-id="001" data-product-name="Laptop" data-product-price="1200">Laptop</li>
        <li data-product-id="002" data-product-name="Smartphone" data-product-price="800">Smartphone</li>
        <li data-product-id="003" data-product-name="Tablet" data-product-price="500">Tablet</li>
    </ul>

    <script>
        // Seleccionamos la lista de productos
        const productList = document.getElementById('product-list');
        const products = productList.getElementsByTagName('li');

        // Iteramos sobre cada producto y mostramos sus datos en la consola
        for (let product of products) {
            const productId = product.dataset.productId;
            const productName = product.dataset.productName;
            const productPrice = product.dataset.productPrice;

            console.log(`ID: ${productId}, Nombre: ${productName}, Precio: $${productPrice}`);
        }
    </script>
</body>
</html>

Solución

En el código anterior, seleccionamos la lista de productos y luego iteramos sobre cada elemento li para acceder a sus atributos de datos y mostrarlos en la consola.

Conclusión

Los atributos de datos en HTML5 son una herramienta poderosa para almacenar información adicional en los elementos HTML de manera estructurada y accesible. Estos atributos son especialmente útiles cuando se trabaja con JavaScript para crear interacciones dinámicas y personalizadas en la página web. Al comprender cómo definir y acceder a los atributos de datos, puedes mejorar significativamente la funcionalidad y la interactividad de tus aplicaciones web.

Atributos de Datos

Introducción

Sintaxis de los Atributos de Datos

Ejemplo Básico

Accediendo a los Atributos de Datos con JavaScript

Ejemplo de Acceso a Atributos de Datos

Ejercicio Práctico

Ejercicio 1: Almacenando Información de Productos

HTML

Solución

Conclusión

Curso de HTML

Módulo 1: Introducción a HTML

Módulo 2: Formateo de Texto en HTML

Módulo 3: Enlaces y Medios en HTML

Módulo 4: Tablas en HTML

Módulo 5: Formularios en HTML

Módulo 6: Elementos Semánticos de HTML5

Módulo 7: Técnicas Avanzadas de HTML

Módulo 8: Integración de HTML y CSS

Módulo 9: Diseño Web Responsivo

Módulo 10: Mejores Prácticas y Accesibilidad

Módulo 11: Proyecto: Construyendo un Sitio Web Completo