El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Els atributs de dades (data attributes) són una característica poderosa d'HTML5 que permet emmagatzemar informació addicional en elements HTML sense utilitzar classes o identificadors. Aquests atributs són especialment útils per a la manipulació de dades amb JavaScript.

Què són els atributs de dades?

Els atributs de dades són atributs personalitzats que es poden afegir a qualsevol element HTML. Es defineixen amb el prefix data- seguit d'un nom d'atribut. Per exemple:

<div data-usuari-id="12345" data-rol="administrador">
    Benvingut, administrador!
</div>

En aquest exemple, el div té dos atributs de dades: data-usuari-id i data-rol.

Sintaxi dels atributs de dades

La sintaxi per a definir un atribut de dades és la següent:

<element data-nom-atribut="valor"></element>

element: L'element HTML al qual s'afegeix l'atribut de dades.
data-nom-atribut: El nom de l'atribut de dades, que ha de començar amb data-.
valor: El valor associat a l'atribut de dades.

Exemple pràctic

Vegem un exemple pràctic on utilitzem atributs de dades per emmagatzemar informació sobre productes en una llista:

<ul>
    <li data-producte-id="001" data-preu="19.99">Producte 1</li>
    <li data-producte-id="002" data-preu="29.99">Producte 2</li>
    <li data-producte-id="003" data-preu="39.99">Producte 3</li>
</ul>

En aquest exemple, cada element de la llista (li) té dos atributs de dades: data-producte-id i data-preu.

Accedint als atributs de dades amb JavaScript

Els atributs de dades es poden accedir fàcilment amb JavaScript utilitzant la propietat dataset de l'element. Vegem com podem accedir als atributs de dades de l'exemple anterior:

<script>
    // Seleccionem el primer element de la llista
    var primerProducte = document.querySelector('li');

    // Accedim als atributs de dades
    var producteId = primerProducte.dataset.producteId;
    var preu = primerProducte.dataset.preu;

    console.log('ID del producte:', producteId); // ID del producte: 001
    console.log('Preu del producte:', preu); // Preu del producte: 19.99
</script>

Exercici pràctic

Enunciat

Crea una pàgina HTML amb una llista de llibres. Cada llibre ha de tenir atributs de dades per al títol, l'autor i el preu. Afegeix un botó que, quan es faci clic, mostri la informació del primer llibre en una alerta.

Solució

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Llibres</title>
</head>
<body>
    <ul>
        <li data-titol="El Quixot" data-autor="Miguel de Cervantes" data-preu="15.99">Llibre 1</li>
        <li data-titol="1984" data-autor="George Orwell" data-preu="12.99">Llibre 2</li>
        <li data-titol="Matar un rossinyol" data-autor="Harper Lee" data-preu="10.99">Llibre 3</li>
    </ul>
    <button id="mostrarLlibre">Mostrar informació del primer llibre</button>

    <script>
        document.getElementById('mostrarLlibre').addEventListener('click', function() {
            var primerLlibre = document.querySelector('li');
            var titol = primerLlibre.dataset.titol;
            var autor = primerLlibre.dataset.autor;
            var preu = primerLlibre.dataset.preu;

            alert('Títol: ' + titol + '\nAutor: ' + autor + '\nPreu: ' + preu);
        });
    </script>
</body>
</html>

Explicació del codi

HTML:
- Creem una llista no ordenada (ul) amb tres elements de llista (li), cadascun representant un llibre amb atributs de dades per al títol, l'autor i el preu.
- Afegim un botó amb l'ID mostrarLlibre.
JavaScript:
- Afegim un event listener al botó que escolta l'esdeveniment click.
- Quan es fa clic al botó, seleccionem el primer element de la llista (li).
- Accedim als atributs de dades (data-titol, data-autor, data-preu) del primer llibre.
- Mostrem la informació del llibre en una alerta.

Resum

Els atributs de dades són una manera flexible i poderosa d'emmagatzemar informació addicional en elements HTML. Són fàcilment accessibles amb JavaScript i poden ser molt útils per a la manipulació de dades en aplicacions web. Amb els atributs de dades, pots mantenir el teu codi HTML net i organitzat mentre afegeixes la funcionalitat necessària per a la teva aplicació.

Atributs de dades

Què són els atributs de dades?

Sintaxi dels atributs de dades

Exemple pràctic

Accedint als atributs de dades amb JavaScript

Exercici pràctic

Enunciat

Solució

Explicació del codi

Resum

Curs d'HTML

Mòdul 1: Introducció a l'HTML

Mòdul 2: Formatació de text en HTML

Mòdul 3: Enllaços i mitjans en HTML

Mòdul 4: Taules en HTML

Mòdul 5: Formularis en HTML

Mòdul 6: Elements semàntics d'HTML5

Mòdul 7: Tècniques avançades d'HTML

Mòdul 8: Integració d'HTML i CSS

Mòdul 9: Disseny web responsiu

Mòdul 10: Millors pràctiques i accessibilitat

Mòdul 11: Projecte: Construint un lloc web complet