Esercizi Attributi Data HTML

Codegrind Team•Jul 16 2023

Ecco degli esercizi semplici con soluzione per praticare le basi sull’utilizzo degli attributi personalizzati data-* in HTML.

Esercizio 1

Utilizza l'attributo data-description per memorizzare una descrizione aggiuntiva all'interno di un elemento HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
  </head>
  <body>
    <p data-description="Questo paragrafo contiene una descrizione aggiuntiva.">
      Questo è un paragrafo di esempio.
    </p>
  </body>
</html>

Esercizio 2

Utilizza l'attributo data-link per memorizzare un link aggiuntivo all'interno di un elemento HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
  </head>
  <body>
    <a href="#" data-link="https://www.example.com">Link di esempio</a>
  </body>
</html>

Esercizio 3

Utilizza l'attributo data-number per memorizzare un numero all'interno di un elemento HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
  </head>
  <body>
    <span data-number="42">Il numero magico è: 42</span>
  </body>
</html>

Esercizio 4

Utilizza l'attributo data-list per memorizzare una lista di elementi all'interno di un elemento HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
  </head>
  <body>
    <ul data-list="Elemento 1, Elemento 2, Elemento 3">
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
    </ul>
  </body>
</html>

Esercizio 5

Utilizza l'attributo data-date per memorizzare una data all'interno di un elemento HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
  </head>
  <body>
    <div data-date="2023-07-15">Evento importante il 15 luglio 2023.</div>
  </body>
</html>

Esercizio 6

Utilizza l'attributo data-variable per memorizzare il valore di una variabile all'interno di un elemento HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
  </head>
  <body>
    <p data-variable="message">
      Questo è un esempio di utilizzo di una variabile.
    </p>
  </body>
</html>

Esercizio 7

Utilizza l'attributo data-confirmed per memorizzare lo stato di una conferma all'interno di un elemento HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
  </head>
  <body>
    <button data-confirmed="true">Conferma</button>
  </body>
</html>

Esercizio 8

Utilizza l'attributo data-username per memorizzare un nome utente all'interno di un elemento HTML.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
  </head>
  <body>
    <p data-username="john_doe">Benvenuto, John Doe!</p>
  </body>
</html>