Testo: p, blockquote, em, strong, abbr, code, pre

HTML non serve solo a mostrare parole. Serve a spiegare che tipo di testo stai scrivendo: un paragrafo, una citazione, una parola enfatizzata, un’abbreviazione o un frammento di codice.

Paragrafi

<p> rappresenta un paragrafo.

<p>Creo pagine web accessibili, veloci e facili da mantenere.</p>

Non usare <br> per separare blocchi di testo che sono paragrafi diversi. Usa più elementi <p>.

Enfasi e importanza

<em> indica enfasi nel discorso. Cambia il tono della frase.

<p>Questo passaggio è <em>davvero</em> importante.</p>

<strong> indica forte importanza, avviso o urgenza.

<p><strong>Attenzione:</strong> salva il file prima di chiudere l'editor.</p>

Il browser spesso mostra entrambi in corsivo o grassetto, ma il punto non è lo stile: è il significato.

Citazioni

Usa <blockquote> per citazioni lunghe o blocchi citati da un’altra fonte.

<blockquote cite="https://example.com/articolo">
  <p>Il web è progettato per collegare documenti, persone e idee.</p>
</blockquote>

Per citazioni brevi dentro una frase puoi usare <q>.

<p>Il docente ha detto: <q>prima la struttura, poi lo stile</q>.</p>

Abbreviazioni

<abbr> permette di espandere un acronimo.

<p><abbr title="Cascading Style Sheets">CSS</abbr> controlla la presentazione della pagina.</p>

L’attributo title aiuta chi non conosce l’abbreviazione.

Codice

Usa <code> per frammenti brevi di codice dentro una frase.

<p>Il documento parte dall'elemento <code>&lt;html&gt;</code>.</p>

Usa <pre> insieme a <code> per blocchi di codice in cui spazi e a capo devono essere conservati.

<pre><code>&lt;h1&gt;Titolo&lt;/h1&gt;
&lt;p&gt;Primo paragrafo.&lt;/p&gt;</code></pre>

Esercizio

Scrivi una breve scheda progetto con:

• due paragrafi;
• una parola enfatizzata con <em>;
• un avviso con <strong>;
• un’abbreviazione con <abbr>;
• un frammento di codice con <code>.

Poi rileggi l’HTML senza guardare il CSS: deve essere chiaro il ruolo di ogni parte del testo.