Obiettivi di apprendimento

Al termine dell’attività saprai riconoscere gli elementi fondamentali di un documento HTML, utilizzare gli attributi più comuni, organizzare una pagina con tag semantici e creare una breve presentazione personale visualizzabile nel browser.

1. Perché si usa HTML

Una pagina web non è soltanto un insieme di parole e immagini: i suoi contenuti devono essere organizzati in modo che il browser possa interpretarli correttamente. HTML, sigla di HyperText Markup Language, è il linguaggio di marcatura che descrive la struttura e il significato delle informazioni presenti nella pagina. Non stabilisce, da solo, l’aspetto grafico dettagliato né il comportamento interattivo: questi compiti sono generalmente affidati a CSS e JavaScript.

2. Tag, elementi e annidamento

HTML usa marcatori chiamati tag, scritti tra parentesi angolari. Molti elementi hanno un tag iniziale, un contenuto e un tag finale. Il tag finale si distingue per la barra /.

<p>Questo è un paragrafo.</p> <h1>Il titolo principale</h1>

 

Nel primo esempio, <p> apre il paragrafo e </p> lo conclude: l’insieme costituisce un elemento HTML. Gli elementi possono anche contenerne altri, purché la struttura sia ordinata. Alcuni elementi, come <img> e <br>, sono detti “vuoti” e non richiedono un tag di chiusura.

<p>Frequento <strong>TPSIT</strong> a scuola.</p> <br>

 

3. Attributi: informazioni aggiuntive

Gli attributi precisano le caratteristiche di un elemento. Si inseriscono nel tag di apertura e, spesso, sono espressi come nome=”valore”. Per esempio, un collegamento deve indicare la propria destinazione; un’immagine deve specificare il file da mostrare e un testo alternativo.

<a href=”https://www.example.com”>Apri il sito</a> <img src=”laboratorio.jpg” alt=”Postazioni del laboratorio”>

 

Attributo	Funzione
href	Indica l’indirizzo di destinazione di un collegamento.
src	Indica il percorso del file immagine.
alt	Descrive l’immagine in forma testuale, utile anche per l’accessibilità.

Nota: il testo alternativo dovrebbe comunicare il contenuto o la funzione dell’immagine, non limitarsi a ripetere il nome del file.

4. Lo scheletro di un documento HTML5

Un documento HTML completo segue una struttura riconoscibile. La dichiarazione iniziale comunica al browser la modalità HTML moderna; l’elemento <html> racchiude il documento, mentre <head> contiene informazioni per il browser e <body> ospita ciò che appare nella pagina.

<!DOCTYPE html> <html lang=”it”> <head> <meta charset=”UTF-8″> <title>La mia pagina</title> </head> <body> <h1>Benvenuti!</h1> <p>Questa è la mia prima pagina HTML.</p> </body> </html>

 

Il valore lang=”it” segnala che la lingua del documento è l’italiano. <meta charset=”UTF-8″> permette di rappresentare correttamente i caratteri, comprese le lettere accentate. <title> definisce il titolo visualizzato nella scheda del browser; non coincide con il titolo <h1> mostrato nel contenuto.

5. I tag semantici di HTML5

Una pagina ben organizzata non si limita a raggruppare contenuti: rende riconoscibile la funzione delle sue parti. Per questo HTML mette a disposizione elementi semantici, che facilitano la lettura del codice e aiutano tecnologie assistive e motori di ricerca a interpretare la struttura.

Tag	Quando si usa
<header>	Intestazione di una pagina o di una sua sezione.
<nav>	Area dedicata ai collegamenti di navigazione.
<main>	Contenuto principale del documento.
<section>	Raggruppamento tematico di contenuti.
<article>	Contenuto autonomo, come una notizia o un articolo.
<footer>	Informazioni conclusive, per esempio autore o riferimenti.

Esempio di organizzazione: un’intestazione presenta il sito, <main> contiene le sezioni informative e il piè di pagina raccoglie le indicazioni finali. Non tutti i tag devono necessariamente comparire in ogni pagina: si scelgono in base al significato dei contenuti.

6. Laboratorio guidato: una pagina di presentazione

Apri un editor di testo o di codice, crea una cartella dedicata all’esercizio e salva al suo interno un file chiamato index.html. Inserisci il codice seguente, poi apri il file con un browser.

<!DOCTYPE html> <html lang=”it”> <head> <meta charset=”UTF-8″> <title>Mi presento</title> </head> <body> <header> <h1>La mia pagina personale</h1> </header> <main> <section> <h2>Chi sono</h2> <p>Sono Alex e frequento un istituto tecnico.</p> <img src=”profilo.jpg” alt=”Immagine di presentazione”> </section> <section> <h2>I miei interessi</h2> <ul> <li>Informatica</li> <li>Musica</li> </ul> <a href=”https://www.example.com”>Un sito interessante</a> </section> </main> <footer> <p>Progetto di TPSIT – 2026/2027</p> </footer> </body> </html>

 

Osserva il risultato: il browser mostra titoli, paragrafi, un elenco e un collegamento. Se il file profilo.jpg non si trova nella stessa cartella di index.html, l’immagine non sarà visualizzata: è un’occasione per comprendere il ruolo di src. L’aspetto grafico è volutamente essenziale, perché non abbiamo ancora applicato CSS.

7. Metti in pratica

Personalizza i testi della pagina, sostituisci l’immagine con un file presente nella cartella e aggiungi una terza sezione intitolata “La mia classe”. Inserisci al suo interno un elenco numerato utilizzando <ol> e <li>. Verifica infine che tutti gli elementi siano chiusi e annidati correttamente.