Quando usare questo esempio
Mostra come combinare titoli, immagini, liste e link in una struttura personale ordinata.
Codice HTML5 commentato
Osserva la struttura e prova a riconoscere il ruolo dei tag prima di copiarla.
<main>
<article>
<header>
<h1>Giulia Neri</h1>
<p>Web editor junior con interesse per contenuti chiari e accessibili.</p>
</header>
<section>
<h2>Profilo</h2>
<img src="img/giulia-neri.jpg" alt="Ritratto di Giulia Neri">
<p>Creo testi per il web e sto approfondendo HTML5 e CSS3.</p>
</section>
<section>
<h2>Competenze</h2>
<ul>
<li>Scrittura contenuti</li>
<li>HTML semantico</li>
<li>Revisione testi</li>
</ul>
</section>
</article>
</main>Commento didattico
La pagina è organizzata in blocchi riconoscibili: un contenitore principale, titoli ordinati e contenuti raggruppati per argomento. Questo permette di applicare il CSS senza dover riscrivere la struttura HTML.
Gli elementi semantici non servono a “colorare” la pagina: aiutano a spiegare che cosa rappresenta ogni parte del documento.
Da ricordare: se un blocco ha un significato autonomo, valuta
article; se è solo una sezione tematica della pagina, usa section.Varianti possibili
- Sostituisci la foto con un’immagine reale e un alt specifico.
- Aggiungi un footer con email, telefono o profili social.
Come trasformarlo in esercizio
Cambia il tema, sostituisci i contenuti fittizi con contenuti reali e aggiungi almeno un controllo di accessibilità: testi alternativi, label o link descrittivi.
Continua gli esempi
Confronta questo modello con gli altri esempi e prova a combinarne le parti utili.