📢 Nuovo Corso Laravel API disponibile!

Esercizi Attributi Data HTML

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>