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
<!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>