Esercizi Div e Span HTML

Ecco degli esercizi semplici con soluzione per praticare le basi sull’utilizzo dei tag div e span in HTML come elementi contenitori.

Esercizio 1

Crea una struttura HTML con tre paragrafi all'interno di un `div`.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <div>
      <p>Primo paragrafo</p>
      <p>Secondo paragrafo</p>
      <p>Terzo paragrafo</p>
    </div>
  </body>
</html>

Esercizio 2

Crea un paragrafo con una parola evidenziata utilizzando `span`.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <p>
      Questo è un esempio di
      <span style="color: red;">parola evidenziata</span> all'interno di un
      paragrafo.
    </p>
  </body>
</html>

Esercizio 3

Crea una struttura HTML con un `div` che contiene un paragrafo con una parola evidenziata utilizzando `span`.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <div>
      <p>
        Questo è un esempio di
        <span style="color: red;">parola evidenziata</span> all'interno di un
        paragrafo all'interno di un div.
      </p>
    </div>
  </body>
</html>

Esercizio 4

Crea un `div` con un altro `div` annidato al suo interno.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
  </head>
  <body>
    <div>
      Questo è un div esterno.
      <div>Questo è un div interno.</div>
    </div>
  </body>
</html>

Esercizio 5

Crea uno `span` in un `p` con un altro `span` annidato al suo interno.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
  </head>
  <body>
    <p>
      Questo è un paragrafo con del testo normale e
      <span>testo in un <span>span annidato</span></span
      >.
    </p>
  </body>
</html>

Esercizio 6

Crea un `div` con un `span` annidato al suo interno.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
  </head>
  <body>
    <div>Questo è un div con <span>testo in un span annidato</span>.</div>
  </body>
</html>

Esercizio 7

Crea un `div` con un attributo personalizzato.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
  </head>
  <body>
    <div data-id="123">Questo è un div con un attributo personalizzato.</div>
  </body>
</html>