§ 9. Come inserire le note in un testo pubblicato sul web

La maggioranza dei miei lettori ha letto almeno un libro nel corso della propria vita (lo spero!) e dunque sa come sono fatte le note a un testo stampato. In un libro di qualità – dal punto di vista tipografico – le note si mettono in fondo alla pagina.

Anche i testi pubblicati sul web spesso avrebbero bisogno delle note (è inutile creare una nuova pagina per pubblicare poche parole di commento), ma in tale caso il fondo della pagina coincide spesso con la fine del testo. Noi ci teniamo alla salute psichica dei nostri lettori, dunque evitiamo di obbligarli a scrollare in basso per poi tentare di ritrovare il punto della lettura interrotta sullo schermo. Non vogliamo nemmeno sovraccaricare il testo di parentesi lunghe e numerose. Ci serve una soluzione moderna che sfrutti le potenzialità del web.
Sant’Isidoro! [Sant’Isidoro è il patrono dell’internet, dei programmatori e degli studenti.] Perché nessuno quasi nessuno conosce i tag <abbr> e <acronym>? Perché sono così solo nel mio amore verso essi? Solo secondo me rendono un testo più comodo per la lettura?
Formalmente la differenza tra i due tag sta nella loro destinazione a trattare le abbreviazioni (<abbr>) e gli acronimi (<acronym>). Invece praticamente è una differenza finta: al giorno d’oggi qualcuno rispetta le destinazioni di .net e .com? Lo stesso è successo con i due tag. Non temiamo ad applicarli a tutte le parole o frasi dei nostri testi online.
La vera differenza tra i due tag sta nel loro rapporto con la versione 5 del HTML: l’<abbr> ne è supportato mentre l’<acronym> no. Ciò nonostante, al giorno d’oggi funzionano benissimo entrambi.
Sono pigro e non ho voglia di riassumere tutta la documentazione, quindi mi limito a riportare gli esempi di utilizzo e a invitarvi a usarli nei vostri testi come se fossero delle note di Word.
<acronym> (il risultato sarà così)

<acronym style="border-style: dashed; border-width: 0 0 1px 0; border-color: red; cursor: help;" title="un esempio del funzionamento di acronym">il risultato sara cosi</acronym>

<abbr> (il risultato sarà così)

<abbr style="border-style: dashed; border-width: 0 0 1px 0; border-color: red; cursor: help;" title="un esempio del funzionamento di abbr">il&nbsp;risultato sara cosi</abbr>

Per la personalizzazione grafica del risultato finale, come potete facilmente notare, sono richieste delle conoscenze minime del CSS. Per elencare e illustrare tutti i possibili valori da inserire nel style="…" dovrei trascrivere almeno una pagina di un qualsiasi semplicissimo manuale: non è il mio obiettivo.