Home esercizi html elementi semantici

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>