Corso HTML – I tipi di tag

I tag sono di tre tipi:

1. Elementi di blocco: sono gli elementi che costituiscono un blocco attorno a sé, e che di conseguenza vanno a capo (es. i paragrafi con il tag <p> o il tag <div>)
2. Elementi inline: sono gli elementi che – non andando a capo – determinano l’aspetto del testo o possono essere integrati con esso (es. le immagini con il tag <img>)
3. Liste: numerate, o non numerate

N.B. E’ buona regola non aprire un elemento di blocco se tutti gli elementi inline non sono stati chiusi.

<b><p>paragrafo in grassetto</p></b>


L’esempio precedente sebbene produca il risultato che tutti ci aspettiamo è formalmente errato e dovrebbe essere scritto nel modo seguente:

<p><b>paragrafo in grassetto</b></p>

N.B. E’ buona regola non aprire un blocco con <p> o <div> all’interno di un altro blocco aperto con il tag <p>

<p>testo dentro il paragrafo
    <p>paragrafo dentro il paragrafo</p>
</p>

Anche ques’esempio sebbene produca il risultato che tutti ci aspettiamo è formalmente errato.

Altre regole di buona scrittura:
- utilizzare dei caratteri di tabulazione per aumentare la leggibilità del codice;
- scrivere tutto in minuscolo per compatibilità con l’XHTML.

I tag che si devono provare per questa lezione sono quasi tutti legati alla formattazione del testo e il loro uso è assolutamente intuitivo (<b> <i> <u> <strike> <sup> <sub> <h1>..<h6>).

I tag <p> <div> (con l’attributo align che ha come valori “center”, “left”, “right” e “justify”) permettono di raggruppare il testo in blocchi separati, <br> forza un a capo, <hr> disegna una linea orizzontale.

I tag per la formattazione del testo sono importantissimi, perchè all’interno di una pagina web basta una piccola modifica per creare un contrasto visivo che attira l’occhio. Esistono strumenti tipografici consolidati che permettono di dare risalto ad un blocco di testo, ma è importante non utilizzarli in modo errato.

Infatti, se mettiamo tutto il testo in grassetto, niente risalterà e otterremo soltanto un effetto sgradito alla maggior parte dei lettori; analizziamo adesso in dettaglio i tag conosciuti:

Corsivo – Il corsivo attira l’occhio perché è in contrasto con la forma del corpo del testo; va utilizzato come convenzione o all’interno del testo per parole o frasi accentuate o straniere. Poiché la leggibilità del testo in corsivo è inferiore rispetto al testo normale della stessa misure, è preferibile non usarlo per lunghi blocchi di testo.

Grassetto – Il testo in grassetto conferisce risalto essendo in contrasto con il colore del testo normale. Il grassetto è abbastanza leggibile su schermo, ma grossi blocchi di testo in grassetto mancano di contrasto e si perde quindi il risalto.

Sottolineato – Il testo sottolineato, risale ai tempi delle macchine da scrivere, quando il corsivo e il grassetto non erano disponibili, e risulta troppo pesante interferendo con la forma delle lettere. Inoltre la sottolineatura nei documenti web ha un significato funzionale, infatti indica un collegamento ipertestuale. Quindi se usiamo testo sottolineato in una pagina web, questa sarà sicuramente confuso con un collegamento ipertestuale.

Testo colorato – Anche l’uso del colore, come la sottolineatura ha un significato funzionale speciale nei documenti web. È sconsigliabile usare testo colorato all’interno del testo, perché i lettori penseranno che si tratta di un collegamento ipertestuale. Tuttavia il testo colorato funziona bene per dare risalto ai titoli di sezione e di paragrafo. Scegliete colori scuri in contrasto con lo sfondo della pagina e non utilizzate il blu e il viola che sono i colori predefiniti dei collegamenti web.

Lettere maiuscole – Il testo in lettere maiuscole è uno dei metodi più comuni e meno efficaci per aggiungere risalto tipografico. L’occhio legge soprattutto riconoscendo la forma generale delle parole, non analizzando tutte le lettere e riunendole in una parola riconoscibile. Le parole o i titoli tutti maiuscoli formano rettangoli monotoni che non catturano l’occhio. Per leggere un blocco di testo tutto maiuscolo è necessario leggere il testo lettera per lettera, il che si traduce in una lettura scomoda e lenta.

Spaziatura e rientri – Uno dei modi più efficaci e sottili per variare il contrasto visivo e l’importanza relativa di una porzione di testo consiste semplicemente nell’isolarla o trattarla in modo diverso dal testo circostante. Se desiderate evidenziare le intestazioni principali di una pagina senza ingrandirle, aggiungete uno spazio sopra e sotto ogni intestazione per separarla dalle altre intestazioni e dal testo successivo. Anche i rientri rappresentano un altro modo efficace per distinguere porzioni di testo come gli elenchi puntati, le citazioni o il testo di esempio.

Comunque in generale l’importante è cercare di non colpire troppo agli occhi.