Gestire il testo in HTML5 (seconda parte)
Come abbiamo visto nell’articolo precedente, l’HTML5 ha apportato una serie di cambiamenti nella gestione dei classici tag usati per controllare il testo: nuovi significati e nuove linee guida per gli sviluppatori. Per cui, se da un lato, le regole per scrivere una pagina HTML restano invariate, dall’altro, abbiamo nuove nozioni di cui tenere conto. Riprendiamo da dove ci siamo fermati la volta scorsa.
Lavorare con le intestazioni
Come sanno bene tutti i webdesigner di vecchio corso, le intestazioni, sono dei tag caratterizzati dalla lettera h, seguita da un numero progressivo che va da 1 a 6 (<h1>, <h2>… fino ad <h6>). Un’intestazione crea un testo rilevante dal punto di vista visivo. I vari livelli di importanza, diminuiscono con il numero associato alla lettera iniziale, per cui <h1> è il tag attraverso il quale possiamo creare l’intestazione più grande e <h6> quella più piccola. Questo tag, apparentemente semplice sul piano visivo, era, ed è ancora, molto importante per i motori di ricerca. Inoltre ci consente di contrassegnare le sezioni di un documento attraverso dei titoli identificativi.
Con l’HTML5, abbiamo la possibilità di associare più intestazioni tra di loro tramite il tag <hgroup>. Al suo interno, possiamo organizzare delle informazioni caratterizzate da titoli e sottotitoli.
<!DOCTYPE html>
<html lang="it">
<head>
<title>Esempio</title>
<meta charset="ISO-8859-1">
</head>
<body>
<article style="margin:2px; width:400px; padding:10px; background-color:#eeeeee">
<hgroup>
<h2>Intestazione principale</h2>
<h3>Intestazione secondaria</h3>
</hgroup>
</article>
</body>
</html>
In questo breve esempio, abbiamo una gerarchia costituita da due header, dove il primo, prevale per importanza sul secondo.
Il tag <mark>
Da un punto di vista visivo, si limita ad evidenziare il testo con uno sfondo colorato. In realtà, secondo le indicazioni ufficiali, questo elemento ha il compito di segnalare al lettore delle parole (delle frasi) non enfatizzate nella stesura originale. Facciamo un esempio:
<p>Non è previsto risarcimento quando la merce viene danneggiata a causa di
<mark>urti, cadute o un uso improprio del prodotto</mark>. Per maggiori informazioni,
consultare il manuale a pagina 22.<p>
Così facendo, abbiamo evidenziato una frase del paragrafo con un colore giallo. Volendo, possiamo modificare l’aspetto del nostro “tag evidenziatore”, usando i CSS:
<mark style="background-color: #ff6699">urti, cadute o un uso improprio del prodotto</mark>.
In questo modo, abbiamo impostato un colore diverso a quello di default.
Il tag <hr>
Come accadeva nel vecchio HTML, inserendo questo tag senza alcuna formattazione, otteniamo una riga di interruzione nera. Tuttavia, anche in questo caso abbiamo un nuovo valore semantico. Scrivere <hr>, equivale ad introdurre un cambio tematico all’interno del testo. Ad esempio, se stessimo scrivendo un racconto, potremmo usare <hr> per identificare uno stacco temporale o un cambio di scena.
<p><b>Coroner:</b> Come mai quel sorriso, tenente?</p>
<p><b>Colombo:</b> Forse so come ha fatto il colpevole a non lasciare tracce.</p>
<hr>
<p><i>La mattina successiva, i sospetti furono convocati alla centrale.<i></p>
Il tag genera una linea di orizzontale che separa i due paragrafi. Tralasciando il fatto che, i vecchi attributo della versione 4.01 sono deprecati e quindi non sono supportati da HTML5, possiamo usare i CSS per modificare l’aspetto predefinito. Ad esempio, potremmo creare uno spazio vuoto o inserire un’immagine al posto della linea.
<p><b>Coroner:</b> Come mai quel sorriso, tenente?</p>
<p><b>Colombo:</b> Forse so come ha fatto il colpevole a non lasciare tracce.</p>
<!-- crea uno spazio vuoto tra i due paragrafi-->
<hr style="border: 0;">
<p><i>La mattina successiva, i sospetti furono convocati alla centrale.<i></p>
Azzerando il bordo con uno stile in linea, creiamo uno spazio vuoto che contraddistingue visivamente lo stacco tra il dialogo e la nuova scena. Viceversa, potremmo usare i CSS per collocare un’immagine al posto della linea orizzontale.
<!DOCTYPE html>
<html lang="it">
<head>
<title>Racconto</title>
<meta charset="ISO-8859-1">
</head>
<body>
<article style="margin: 2px; width: 400px; padding:10px; background-color: #eeeeee">
<p><b>Coroner:</b> Come mai quel sorriso, tenente?</p>
<p><b>Colombo:</b> Forse so come ha fatto il colpevole a non lasciare tracce.</p>
<!-- inserisce un'immagine tra i due paragrafi -->
<hr style="height:16px; border:0; background:url('d.png') no-repeat scroll center;">
<p><i>La mattina successiva, i sospetti furono convocati alla centrale.<i></p>
</article>
</body>
</html>
In questo esempio (dove abbiamo usato gli stili in linea per comodità), una png mostra visivamente il cambio di scena all’interno del racconto. Inoltre, sono rispettate tutte le indicazioni strutturali di cui abbiamo parlato nell’articolo precedente.
I tag di rettifica
Esistono dei tag che hanno il compito di indicare delle informazioni non aggiornate o inesatte. In particolare, se volgiamo contrassegnare un’informazione come non più valida, abbiamo a disposizione i tag <del> e il suo equivalente <ins>. Ad esempio, supponiamo di aver fornito in pagina web, alcuni numeri di telefono per poter contattare delle associazioni onlus. Se dopo un certo lasso ti tempo, alcuni di quei numeri non sono più validi, abbiamo a disposizone varie opzioni. Alternativamente alla semplice rimozione dei numeri, potremmo segnalare ai motori di ricerca un’informazione più dettagliata, e ovvero, che alcune di quelle informazioni non sono più valide.
<!DOCTYPE html>
<html lang="it">
<head>
<title>Esempio</title>
<meta charset="ISO-8859-1">
</head>
<body>
< article style="margin: 2px; width: 400px; padding:10px; background-color: #eeeeee">
<p>associazione abc. Tel: 1234567</p>
<p><del>associazione xyz. Tel: 11223344</del></p>
<p>associazione dfg. Tel: 99889911</p>
</article>
</body>
</html>
La seconda associazione dell’elenco, verrà mostrata in tutti i browser come una frase cancellata. E, dal punto di vista semantico, specifica l’informazione come non valida.
IL tag <s> ha un comportamento simile ma con una diversa sfumatura semantica. Inzialmente questo tag era reputato dal W3C come deprecato, ma successivamente è stato reinserito tra i tag approvati. Nel caso di <s>, l’informazione “cancellata” consente al lettore di comprendere meglio il contesto generale. Facciamo un piccolo esempio concreto:
<!DOCTYPE html>
<html lang="it">
<head>
<title>Esempio</title>
<meta charset="ISO-8859-1">
</head>
<body>
<article style="margin: 2px; width: 400px; padding:10px; background-color: #eeeeee">
<p>workshop su JavaScript del 21 settembre: <s>10 posti liberi</s></p>
<p>workshop su JavaScript del 19 ottobre: 8 posti liberi</p>
<p>workshop su JavaScript del 23 novembre: 20 posti liberi</p>
</article>
</body>
</html>
In questo caso, abbiamo una sequenza di date relative ad un ipotetico workshop su JavaScript. La prima data non indica un’informazione errata, ma solo un servizio non più disponibile. Il lettore acquisisce tutta una serie di informazioni implicite, e ovvvero che: la prima data non è più disponibile, i workshop sono tre, quali sono le altre date disponibili, ecc.
Il tag <small>
Si tratta di uno elemento utile per identificare quelle sezioni meno rilevanti rispetto al contenuto principale. Ad esempio, un disclaimer o una nota legale.
<p><small>il materiale pubblicato non può essere usato per fini commerciali</small></p>
Dal punto di vista tipografico, il suo utilizzo comporta un testo più piccolo rispetto al resto del contenuto. Chiaramente, vale lo stesso discorso fatto per i tag precedenti. Ad essere importante, non è la formattazione di default (che in teoria possiamo cambiare), ma il significato per i motori di ricerca e per gli screen reader di nuova generazione.
