|
1. Markup fisici e logici
Markup fisici e logici
Cominciato con l'esaminare la differenza tra tag fisici (stilistici) e logici (strutturali) usando un esempio classico: l'evidenziazione di una parola o di una frase rispetto al resto del paragrafo. È possibile realizzarla mediante due tag fisici: <b></b> per il grassetto (bold) e <i></i> per il corsivo (italic) oppure mediante due corrispettivi tag logici: <strong></strong> ed <em></em> (emphasize). Nel primo caso diciamo al browser di visualizzare obbligatoriamente un testo in grassetto e un testo corsivo (difficilmente leggibile a video), nel secondo caso gli diciamo semplicemente di rafforzarne la visualizzazione oppure di enfatizzarlo, lasciandolo libero di scegliere il modo più idoneo per farlo.
Nella pratica, <b> e <strong> produrranno entrambi un testo in grassetto e <i> ed <em> produrranno entrambi un testo in corsivo, ma <strong> ed <em> sono consigliati dallo standard HTML 4.01 puristi perché indicano al browser una caratteristica del testo, vale a dire che si tratta di parole da mostrare con più forza oppure da enfatizzare, anziché specificare come farlo. In effetti questi ultimi due attributi potrebbero anche produrre un testo sottolineato su un monitor che non sia in grado di generare grassetto e sottolineato, come nel caso del display di molti telefonini. Esistono altri esempi di questo tipo come nel caso del sottolineato e del barrato che si ottengono rispettivamente con i due tag fisici <u> e <s>, ma che possono essere riprodotti anche con due nuovi tag specifici di HTML 4.01: <ins> e <del>. Il primo indica concettualmente l'inserimento d'informazioni che potrebbero essere temporanee e che devono essere verificate oppure che potrebbero cambiare in futuro, il secondo indica invece la cancellazione visiva del brano d'informazione che racchiude. Vediamo perciò che l'impiego di tag logici aggiunge significato al semplice effetto grafico e che tale significato può quindi essere utilizzato all'interno di programmi di lettura automatica delle pagine Web (vedremo meglio questo genere di applicazioni quando parleremo di XML). Nella tabella "Marcatori per formattare il testo" trovate una sintesi di tutti i tag compatibili con HTML 4.01 per modificare l'aspetto e il significato di un blocco di testo.
Marcatori fisici e logici
In questa figura notiamo come gli attributi tipografici di base assegnati da HTML a un testo formattato unicamente con tag strutturali siano inadeguati. Il titolo di primo livello appare gigantesco rispetto al testo e con una spaziatura eccessiva sia sopra che sotto. Gli altri due livelli di titolo mostrano lo stesso problema, benché ridimensionato. Notiamo invece l'effetto identico ottenuto con i tag stilistici <b> e <i> rispetto ai corrispettivi tag strutturali <strong> ed <em> (consigliati).

Codice esemplificativo dell'immagine sopra
Qui vediamo il listato HTML che produce l'effetto visualizzato nella figura precedente. Notate che ciascun titolo dispone di un proprio tag e che il testo è integralmente racchiuso in un tag di paragrafo che lo identifica. Notate che la "è" viene trasformata in una delle entità previste da HTML per la codifica dei caratteri particolari, in questo caso è - notate che l'entità comincia sempre con & e termina con il punto e virgola.

Ma cosa succede quando decidiamo d'intervenire su interi blocchi di testo modificandone, ad esempio, font, colore, dimensione, allineamento e posizionamento rispetto ad altri elementi? Dobbiamo decidere se seguire la vecchia strada dei tag fisici o stilistici oppure abbracciare la nuova dei fogli di stile. Vediamo innanzi tutto la prima soluzione, cioè cosa si può fare utilizzando i tag e gli attributi che ereditiamo dall'HTML 3.2. Il primo tra questi è <p> che definisce il paragrafo e che impone al browser per la sua sola presenza d'inserire una riga vuota prima e dopo il paragrafo stesso. Alcuni lo usano anche da solo per inserire spazi bianchi all'interno della pagina, ma i browser di futura generazione potrebbero filtrare i paragrafi vuoti eliminando gli spazi così introdotti.
Perciò alla pari delle tabelle, dove non è consigliabile creare celle completamente vuote anche se servono al fine di creare spazi bianchi, il consiglio è di riempire il paragrafo con almeno uno spazio bianco non eliminabile, che in HTML viene generato con l'entità (non breaking space di cui parliamo più dettagliatamente in un riquadro a parte "Gestire gli spazi nel testo"). Nell'HTML 3.2 il tag di chiusura </p> è facoltativo, ma diventa obbligatorio in XHMTL 1.0 (la versione di HTML che consente l'impiego delle funzioni avanzate di XML). L'attributo "storico" del tag <p> deprecato da HTML 4.01 è align che regge i parametri: left, center, right, justify (quest'ultimo supportato solo da vecchie versioni di browser), per allineare il testo al bordo sinistro, destro oppure al centro della pagina. Nel caso non volessimo inserire una riga vuota al termine del paragrafo, ma semplicemente andare a capo oppure volessimo inserire diverse righe vuote consecutive, utilizzeremmo il tag <br> (break) che fa continuare il paragrafo e ne mantiene le impostazioni anche dopo il ritorno a capo e non richiede tag di chiusura.
Marcatori per formattare il testo |
Tag fisici |
Tag logici |
Effetto visibile |
Significato |
<b> |
<strong> |
grassetto |
evidenziato |
<i> |
<em> |
corsivo |
evidenziato |
<u> |
<ins> |
sottolineato |
inserimento temporaneo |
<s> |
<del> |
barrato |
cancellazione visibile |
<pre> |
|
monospaziato con riporto di tutti gli spazi e ritorni a capo presenti nel documento originale e con riga vuota sopra e sotto. Conserva grassetti e corsivi. |
testo preformattato |
<tt> |
<kbd> |
monospaziato |
testo non formattabile |
|
<samp> |
monospaziato |
testo campione |
<code> |
monospaziato |
codice programma |
<blink> |
|
lampeggiante (Netscape) |
evidenziato |
|
<address> |
corsivo e ritorno a capo |
indirizzo |
<cite> |
corsivo |
citazione |
<blockquote> |
rientro con riga vuota sopra e sotto |
citazione a blocco |
<big> |
aumento dimensioni corpo |
testo grande |
<small> |
riduzione dimensioni corpo |
testo piccolo |
<sub> |
testo a pedice |
pedice |
<sup> |
testo ad apice |
apice |
<abbr> |
nessuno |
abbreviazione |
<dfn> |
nessuno |
definizione termine |
<q> |
nessuno |
citazione in paragrafo |
<var> |
corsivo |
nome di variabile |
<h1>-<h6> |
aumento dimensioni e spaziatura |
titolo e titolini |
Tutti questi marcatori possono essere sono inseriti all'interno di un paragrafo, ma <h#> e <blockquote> possono anche vivere separatamente. Tutti i tag fisici sono deprecati da HTML 4.01. |
|