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>