Gestire il testo in HTML5 (prima parte)
Prima di passare alle novità più rappresentative del nuovo HTML, a partire da questo articolo, analizziamo come la versione 5 ha confermato (o rinnovato) i marcatori per gestire il testo.
Il tag <p>
Per chi mastica un pizzico di webdesign, si tratta di una vecchia conoscenza. È un tag semplicissimo che identifica il testo come paragrafo, e si limita a creare uno rientro a capo ad ogni chiusura. Il suo funzionamento e il suo significato, restano invariati.
I tag che restituiscono il corsivo
Abbiamo numerosi tag che, senza applicare alcuna formattazione ulteriore, restituiscono il testo in corsivo. In genere si tratta di marcatori che identificano un testo “speciale”, il quale andrebbe opportunamente connotato per aiutare i motori di ricerca e gli screen reader ad analizzare correttamente la pagina web. Il compito del webdeisgner è quello di saper analizzare il contesto e saper scegliere lo strumento corretto in base alla situazione.
Cominciamo questa veloce carrellata a partire dal vecchio <i>.
Fin da quando l’HTML muoveva i primi passi, questo elemento serviva a trasformare il testo in corsivo. Il suo utilizzo, resta dal punto di vista tecnico invariato: ancora oggi se ad esempio scriviamo <i>ciao mondo</i> in una pagina HTML5, otterremo le due parole in corsivo. Tuttavia, abbiamo nuove sfumature dal punto di vista semantico e un nuovo modo di relazionarsi con gli altri elementi del linguaggio. Secondo le specifiche ufficiali, si consiglia l’uso di questo tag in due casi:
1)Quando abbiamo un testo che genericamente si distacca dal contesto, come ad esempio la voce narrante all’interno di un racconto.
2)Quando usiamo una parola (o una frase) straniera, in una pagina web scritta nella nostra lingua.
Facciamo un piccolo esempio. Supponiamo di voler pubblicare online un racconto poliziesco dedicato al celebre tenente Colombo.
<p>Colombo: lei dove si trovava tra le 20.00 e le...</p>
<p><i>Il tenente Colombo interruppe la frase e cominciò a rovistare
le tasche dell'impermeabile alla ricerca del suo taccuino.</i></p>
<p>David Sanders: Tenente, come osa inserirmi tra i sospettati?</p>
Nel nostro esempio abbiamo tre paragrafi: Una frase pronunciata da Colombo, una descrizione della scena e la risposta dell’indiziato. Poiché la voce narrante si distingue dai dialoghi e fornisce al lettore delle informazioni aggiuntive, possiamo considerare la frase adatta ad essere contraddistinta dal tag <i>.
Facciamo un altro esempio:
<p>Quando vado a Londra, adoro mangiare il <i lang="en">pudding</i></p>.
Nel secondo caso, abbiamo un termine tipicamente inglese inserito nel contesto nostrano. Osservando la sintassi, possiamo osservare come venga usato l’attributo lang per specificare la lingua straniera.
A parte i due casi citati, il W3C consiglia di usare il tag <i> tutte quelle volte in cui vogliamo identificare un testo “particolare” che non può essere caratterizzato diversamente. Ma volendo sfruttare al massimo l’HTML5, difficilmente ne avremo bisogno. Ci sono infatti una serie di elementi molto precisi con i quali connotare le frasi che si differiscono dal testo comune.
In particolare, tra i tag riconosciuti da tutti i browser recenti abbiamo:
<cite> Per indicare il titolo di un’opera.
<dfn> La definizione di una parola.
<var> Una variabile matematica.
<address> Un indirizzo.
Se proviamo questo codice al volo in un browser:
<!DOCTYPE html>
<html lang="it">
<head>
<title>Esempio testi in corsivo</title>
<meta charset="ISO-8859-1">
</head>
<body>
<p>Ipotizziamo una variabile numerica <var>n</var></p>
<p> Formica:<dfn>insetto appartenente alla famiglia degli imenotteri.</dfn></p>
<p><cite>La fine dell'eternità</cite> è uno dei migliori romanzi di Asimov.</p>
<p>
<address>
Mario Rossi <br> Via Giacomo Leopardi, 1<br> Roma<br>
</address>
</p>
</body>
</html>
potremo osservare come, tutti questi tag, restituiscono di default la formattazione in corsivo. Ma a prescindere dal tipo di formattazione che decideremo di usare tramite i CSS, abbiamo elementi che suddividono le varie informazioni in categorie distinte.
Un discorso a parte va fatto per il tag <em>. Questo elemento specifica un testo enfatizzato. Il suo utilizzo è consigliato per quei casi in cui vogliamo rappresentare una parola o una frase che va pronunciata (o letta) in modo diverso, in quanto rappresentativa di un contesto emozionale fuori dall’ordinario. Torniamo all’esempio precedente:
<p>Colombo: lei dove si trovava tra le 20.00 e le...</p>
<p><i>Il tenente Colombo interruppe la frase e cominciò a rovistare
le tasche dell'impermeabile alla ricerca del suo taccuino.</i></p>
<p>David Sanders: Tenente, <em>come osa</em> inserirmi tra i sospettati?</p>
le parole “come osa” sono rappresentative in una forte emozione. Il personaggio è offeso dalla domanda di Colombo. Tralasciando il fatto che quando accade, nove volte su dieci ci troviamo di fronte al colpevole, il tag <em >ci consente di specificare una frase che va letta diversamente dalle altre. E anche in questo caso, senza usare particolari formattazioni, avremo del testo in corsivo.
Il grassetto
Anche per il grassetto, abbiamo dei tag che, pur condividendo la stesse resa tipografica, hanno significati diversi. Cominciamo dallo storico <b>.
Questo elemento è consigliato per evidenziare del testo che, pur non avendo una particolare valenza semantica, ci interessa mettere in evidenza sul piano tipografico.
Ad esempio, supponendo di voler scrivere un racconto dedicato al tenente Colombo, potremmo usare il grassetto per evidenziare i nomi dei personaggi.
<p><b>Colombo</b>: lei dove si trovava tra le 20.00 e le...</p>
<p><i>Il tenente Colombo interruppe la frase e cominciò a rovistare
le tasche dell'impermeabile alla ricerca del suo taccuino.</i></p>
<p><b>David Sanders</b>:Tenente, <em>come osa</em> inserirmi tra i sospettati?</p>
In questo caso, non vogliamo dare una particolare significato al testo in grassetto, ma limitarci ad agevolare la leggibilità del racconto evidenziando i nomi dei personaggi.
Il discorso cambia con il tag <strong>: in quel caso, pur ottenendo la stessa resa, abbiamo una parola o una frase identificata come importante sia all’interno del testo che per i motori di ricerca. Per cui, supponendo di aver creato un sito web dedicato ad un agriturismo, potremmo utilizzare <strong> per sottlineare alcune parole chiave:
<p><strong>L'agriturismo xy</strong>
offre la degustazione di <strong>vini</strong></p>
Così facendo, abbiamo segnalato come importanti, il nome dell’agriturismo e il servizio offerto.
