- Imparare a strutturare il testo all’interno di una pagina HTML.
- Usare correttamente titoli, paragrafi, interruzioni e separatori.
- Applicare formattazioni semantiche per dare significato al contenuto.
- Conoscere i caratteri speciali e i simboli HTML.
1️⃣ Strutturare il testo
Il testo in HTML si organizza in blocchi e linee.
Gli elementi di blocco (come <p> o <h1>) iniziano su una nuova riga, mentre quelli inline (come <strong> o <em>) continuano nella stessa riga.
<p>Questo è un paragrafo di testo.</p>
<p>Questo è un secondo paragrafo.</p>
2️⃣ Titoli gerarchici
HTML definisce sei livelli di titoli: da <h1> a <h6>.
Devono essere usati in ordine logico e mai solo per motivi estetici.
<h2>Modulo 2 – Testo e paragrafi</h2>
<h3>Esempi di formattazione</h3>
3️⃣ Paragrafi e interruzioni
<p>— delimita un paragrafo;<br>— forza un ritorno a capo singolo;<hr>— inserisce una linea orizzontale di separazione.
<hr>
<p>Nuovo paragrafo dopo la linea.</p>
4️⃣ Evidenziare parti di testo
L’HTML dispone di elementi semantici per evidenziare concetti:
<strong>→ importanza (grassetto semantico);<em>→ enfasi (corsivo);<mark>→ evidenziazione colorata;<small>→ testo di nota o minore rilievo;<del>e<ins>→ testo eliminato o inserito.
<p>Un <mark>passaggio chiave</mark> per la lezione.</p>
5️⃣ Caratteri speciali
Alcuni simboli non possono essere scritti direttamente perché fanno parte della sintassi HTML.
Si usano le entità:
| Simbolo | Entità HTML | Descrizione |
|---|---|---|
| < | < | minore |
| > | > | maggiore |
| & | & | e commerciale |
| © | © | copyright |
| € | € | euro |
6️⃣ Linee orizzontali e separatori
La linea orizzontale <hr> è utile per separare sezioni logiche del contenuto:
<p>Testo della prima parte.</p>
<hr>
<h2>Sezione 2</h2>
<p>Testo della seconda parte.</p>
7️⃣ Esempio completo
<html lang=”it”>
<head>
<meta charset=”utf-8″>
<title>Testo e paragrafi</title>
</head>
<body>
<h1>Corso HTML – Modulo 2</h1>
<p>Questo modulo tratta la gestione del testo e dei paragrafi.</p>
<p>Esempio di <strong>grassetto</strong> ed <em>enfasi</em>.</p>
<hr>
<p><small>© 2025 Liceo Masci – Corso HTML</small></p>
</body>
</html>
8️⃣ Esercizi guidati
🔹 Esercizio 1 — Crea una pagina con due paragrafi e un titolo <h1>
Salva il file come testo.html, includi un <hr> fra i due paragrafi.
🔹 Esercizio 2 — Uso dei tag semantici
Scrivi un testo di 4 righe in cui compaiano <strong>, <em> e <mark>.
🔹 Esercizio 3 — Caratteri speciali
Mostra i simboli <, >, &, © e € usando le relative entità.
9️⃣ Verifica lampo
<br>inserisce una riga vuota fra paragrafi → Falso.- Il tag
<h3>è gerarchicamente inferiore a<h2>→ Vero. - Il tag
<strong>indica enfasi visiva ma non semantica → Falso.
Rubrica di valutazione
| Criterio | Eccellente | Buono | Base | Da rivedere |
|---|---|---|---|---|
| Struttura del testo | Uso corretto di titoli e paragrafi | Piccole irregolarità | Minime gerarchie | Assenza di logica strutturale |
| Formattazione semantica | Uso mirato di <strong> e <em> | Uso parziale | Solo visiva | Errata o assente |
| Correttezza sintattica | Nessun errore HTML | Minori warning | Un errore per tag | Errori diffusi |
| Originalità | Contenuto personale e curato | Buono | Standard | Assente |
Includi titolo, 2 paragrafi descrittivi, citazione evidenziata con
<mark> e firma in <small>. 🔎 Approfondimento storico-linguistico
La parola paragrafo deriva dal greco paragraphos («segno a margine»), usato dagli scribi per
indicare la fine di un pensiero. Con l’avvento della stampa tipografica, il simbolo divenne parte integrante della
grammatica tipografica moderna e nel linguaggio informatico si trasformò in un concetto strutturale:
<p> delimita un’unità logica di testo.
L’idea di markup ha origine anch’essa nel mondo tipografico. I tipografi segnavano con matite colorate i
manoscritti da comporre; negli anni ’60-’70 i sistemi di elaborazione testi ripresero questo metodo in forma digitale
con lo SGML (Standard Generalized Markup Language), da cui derivano sia l’HTML sia l’XML.
Possiamo rappresentare formalmente la struttura sintattica di un paragrafo come:
In questa forma Backus–Naur (BNF) il linguaggio HTML appare come una grammatica,
non come un linguaggio di programmazione, ma come un insieme di regole di composizione.
🧭 Evoluzione semantica e accessibilità
L’evoluzione dal HTML 4.01 (1999) all’HTML5 (2014) ha segnato il passaggio da un linguaggio
orientato alla presentazione ad uno semantico. Non si usa più <b> per il grassetto visivo,
ma <strong> per indicare importanza concettuale. Allo stesso modo <i> viene
sostituito da <em> per l’enfasi.
Questa distinzione favorisce l’accessibilità: i lettori di schermo interpretano la struttura e non solo
la forma. I moderni browser combinano tali informazioni con gli attributi ARIA
(Accessible Rich Internet Applications) per rendere il testo comprensibile anche a chi utilizza
tecnologie assistive.
Le linee guida internazionali WCAG 2.2 raccomandano di:
- usare tag semantici coerenti con il significato,
- garantire contrasti cromatici adeguati,
- fornire testo alternativo (
alt) per immagini e icone, - mantenere la gerarchia dei titoli in ordine logico.
L’HTML moderno, quindi, non si limita a mostrare il contenuto, ma ne esprime anche il significato.
Ogni tag comunica cosa è un’informazione, non solo come appare.