Corso di HTML / Dare significato al testo: enfasi, citazioni, abbreviazioni e codice

Gli elementi di testo HTML descrivono perché una sezione è speciale, e non solo il suo aspetto. Utilizzate em per enfatizzare, strong per l'importanza, q e blockquote per citazioni, abbr per abbreviazioni e code per codice.

Enfasi e importanza: em e strong

Usate em per evidenziare una parola in una frase. Usate strong quando il contenuto stesso ha un significato speciale, come nel caso di un avviso. I browser spesso mostrano questi elementi in corsivo o in grassetto, ma i loro significati non sono definiti da questi stili.

<p>Salvare il file <em>prima di</em> aggiornare il browser.</p>

<p><strong>Non condividere la tua password.</strong></p>

La prima frase enfatizza l'ordine delle azioni; la seconda indica un avviso. Se avete bisogno solo di una formattazione visiva, usate il CSS anziché aggiungere elementi semantici senza significato corrispondente.

Citazioni brevi e blocco di citazioni: q e blockquote

Usate q per una breve citazione all'interno di una frase e blockquote per una citazione che forma un blocco separato. Le frasi seguenti sono state scritte esclusivamente per dimostrare gli elementi.

<p>L&#x27;istruzione è <q>Salva le tue modifiche</q>.</p>

<blockquote>
  <p>Pianifica la struttura del documento prima di scriverne il contenuto.</p>
</blockquote>

Un browser può fornire le virgolette per q, quindi non aggiungetene un secondo paio intorno. Per una vera citazione, controllate la formulazione e indicate la fonte nel testo visibile. L'attributo cite su blockquote non mostra automaticamente una fonte ai lettori.

Spiegare le abbreviazioni con abbr

abbr indica un'abbreviazione. Scrivete un termine sconosciuto per esteso alla sua prima menzione nel testo circostante; un lettore non dovrebbe dover passare il mouse sull'attributo title per conoscerne il significato.

<p>HyperText Markup Language (<abbr title="HyperText Markup Language">HTML</abbr>) definisce la struttura di una pagina web.</p>

Non è necessario ripetere il termine per esteso a ogni successivo utilizzo nello stesso contesto.

Codice e input dell'utente: code e kbd

Usate code per un piccolo frammento di codice o un nome di file discusso come codice. Usate kbd per tasti o altri input che l'utente deve fornire. Per mostrare letteralmente le parentesi angolari del codice, utilizzate i riferimenti ai caratteri descritti nella sintassi HTML.

<p>Salva <code>index.html</code> con <kbd>Ctrl</kbd>+<kbd>S</kbd>.</p>

Per codice multilinea, che deve mantenere l'indentazione, è possibile inserire code all'interno di pre. I blocchi di codice di questo corso usano pre e code, con una classe linguaggio per l'evidenziazione della sintassi.

Confrontare la semantica in un documento completo

Salvate questo documento completo come text-semantics.html in UTF-8. La citazione è un'istruzione fittizia scritta per dimostrare l'elemento.

<!doctype html>
<html lang="it-IT">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Esercizio sulla semantica del testo</title>
</head>
<body>
  <h1>Una breve istruzione</h1>
  <p>Controlla il risultato <em>dopo che</em> hai salvato il file.</p>
  <p><strong>Conserva il file originale.</strong></p>
  <p>Un&#x27;istruzione fittizia afferma <q>Salva le tue modifiche</q>.</p>
  <p>Questo documento utilizza HyperText Markup Language (<abbr title="HyperText Markup Language">HTML</abbr>).</p>
  <p>Salva con <kbd>Ctrl</kbd>+<kbd>S</kbd>.</p>
  <pre><code>&lt;p&gt;Frase di esempio&lt;/p&gt;</code></pre>
</body>
</html>

1. Identificate l'enfasi, l'avvertimento, la citazione e l'abbreviazione leggendo il testo circostante.
2. Assicuratevi che il tag <p> finale sia visualizzato come codice e non interpretato come paragrafo.
3. Sostituite temporaneamente strong con span e poi ripristinatelo per il messaggio importante. Questo confronta il significato dell'elemento con la sua rappresentazione standard.

La documentazione di MDN spiega l'elemento utilizzato per la visualizzazione del codice.

Scegliere l'elemento in base al significato

• Usate em per enfasi e strong per importanza.
• Usate q per una citazione in linea e blockquote per una citazione autonoma.
• Usate abbr per un'abbreviazione e spiegate termini sconosciuti in un testo leggibile.
• Distinguete il codice con code e gli input dell'utente con kbd.

Consultate la documentazione degli elementi HTML su MDN per i contenuti consentiti e la sintassi dettagliata di ciascun elemento. La distinzione tra significato e presentazione si applica anche ai principi fondamentali dell'accessibilità: intestazioni, link, immagini e tastiera.