Esercizi Elementi Semantici HTML

Ecco degli esercizi semplici con soluzione per praticare le basi sull’utilizzo corretto dei tag semantici, all’interno della struttura di una pagina HTML.

Esercizio 1

Crea una struttura HTML con un elemento `header` che contiene il titolo della pagina.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <header>
      <h1>Titolo della pagina</h1>
    </header>
  </body>
</html>

Esercizio 2

Crea una struttura HTML con un elemento `nav` che contiene un elenco di link di navigazione.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </body>
</html>

Esercizio 3

Crea una struttura HTML con un elemento `main` che contiene il contenuto principale della pagina. Aggiungilo ai precendeti elementi `header` e `nav`

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <header>
      <h1>Titolo della pagina</h1>
    </header>

    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

    <main>
      <h2>Contenuto principale</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </main>
  </body>
</html>

Esercizio 4

Crea una struttura HTML con un elemento `section` che rappresenta una sezione del contenuto.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <header>
      <h1>Titolo della pagina</h1>
    </header>

    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

    <main>
      <section>
        <h2>Sezione 1</h2>
        <p>Contenuto della sezione 1</p>
      </section>

      <section>
        <h2>Sezione 2</h2>
        <p>Contenuto della sezione 2</p>
      </section>
    </main>
  </body>
</html>

Esercizio 5

Crea una struttura HTML con degli elementi `article` che rappresentano una lista di articoli cliccabili.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <header>
      <h1>Titolo della pagina</h1>
    </header>

    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

    <main>
      <section>
        <article>
          <h2>Articolo 1</h2>
          <p>Contenuto dell'articolo 1</p>
        </article>

        <article>
          <h2>Articolo 2</h2>
          <p>Contenuto dell'articolo 2</p>
        </article>
      </section>
    </main>
  </body>
</html>

Esercizio 6

Crea una struttura HTML con un elemento aside che rappresenta un contenuto accessorio o barra laterale.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <header>
      <h1>Titolo della pagina</h1>
    </header>

    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

    <main>
      <section>
        <article>
          <h2>Articolo 1</h2>
          <p>Contenuto dell'articolo 1</p>
        </article>

        <article>
          <h2>Articolo 2</h2>
          <p>Contenuto dell'articolo 2</p>
        </article>
      </section>
    </main>

    <aside>
      <h3>Contenuto accessorio</h3>
      <p>Questo è un contenuto accessorio o laterale.</p>
    </aside>
  </body>
</html>

Esercizio 7

Aggiungi il `footer` alla pagina con dentro solo le info sul copyright del sito.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <header>
      <h1>Titolo della pagina</h1>
    </header>

    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

    <main>
      <section>
        <article>
          <h2>Articolo 1</h2>
          <p>Contenuto dell'articolo 1</p>
        </article>

        <article>
          <h2>Articolo 2</h2>
          <p>Contenuto dell'articolo 2</p>
        </article>
      </section>
    </main>

    <aside>
      <h3>Contenuto accessorio</h3>
      <p>Questo è un contenuto accessorio o laterale.</p>
    </aside>

    <footer>
      <p>Copyright © 2023</p>
    </footer>
  </body>
</html>

Esercizio 8

Inserisci un'immagine con descrizione visibile utilizzando l'elemento `figure`

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <figure>
      <img src="path/to/image.jpg" alt="Descrizione dell'immagine" />
      <figcaption>Didascalia dell'immagine</figcaption>
    </figure>
  </body>
</html>

Esercizio 9

Crea una struttura HTML con un elemento che rappresenta una data e un orario.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <p>
      La riunione è programmata per il
      <time datetime="2023-07-01T09:00">1° luglio 2023 alle 9:00</time>.
    </p>
  </body>
</html>

Esercizio 10

Crea una struttura HTML con un elemento che evidenzia un testo.

<!DOCTYPE html>
<html>
  <head>
    <title>Titolo della pagina</title>
  </head>
  <body>
    <p>Il termine <mark>importante</mark> deve essere evidenziato.</p>
  </body>
</html>