Web Design  »  Articoli  »  Web design 

La scrittura del codice HTML è alla base del processo di costruzione di un sito web: Un buon sito progettato con i fogli di stile nasce da un codice (x)HTML semantico. In questo appuntamento vedremo cosa sia la semantica e come si possa migliorare il codice HTML.

Cos'è la semantica?

La parola semantica rientra poco nel nostro vocabolario, e può risultare sconsciuta. Applicata al web, e in particolare al markup (sia esso HTML o xHTML) indica un uso proprio dei tag, ovvero usare i tag per il loro scopo.

Breviario dei tag e del loro uso

Questa non pretende di essere una giuda esaustiva, e rimando alla lettura della guida HTML e delle Specifiche HTML 4.01 in Italiano per approfondimenti.

I titoli servono per dichiarare pagine, sezioni di pagina e paragrafi. Il titolo principale di una pagina <h1> generalmente è indicato per racchiudere il nome del sito. Il tag <h2> solitamente descrive una pagina o una macro-sezione, mentre il tag <h3> introduce una sotto-sezione. Personalmente, raramente uso l'<h4>, e ritengo che <h5> e <h6> siano superflui.

I paragrafi servono a contenere frasi: generalmente un paragrafo contiene da massimo tre-quattro frasi logicamente correlate. A tal proposito, usare più tag <p> in una sezione di testo serve per separare i paragrafi e facilitarne la lettura.

Per mandare a capo sezioni di testo l'uso del tag <br> andrebbe limitato al minimo. Alcuni sostengono che non dovrebbe essere proprio usato. Personalmente penso che possa andar bene se dobbiamo mandare a capo una frase all'interno di un paragrafo che è un'entità testuale inscindibile. L'uso di più <br> consecutivi per separare sezioni di testo a aumentare la lunghezza di una sezione andrebbe sempre evitato: i margini impostati via CSS servono proprio a questo scopo.

L'enfasi è un aspetto essenziale nelle sezioni di testo. Si può ottenere con i tag <em> e <strong>, che vengono resi rispettivamente in corsivo e in grassetto. I tag <b> e <i> danno la stessa resa visuale: sono però tag deprecati per il fatto che sono tag esclusivamente presentazionali, e non hanno nessun contenuto semantico. Usare em e strong serve a focalizzare la lettura su parole o sezioni di testo in rilievo, dare una certa profondità al testo e facilitare la lettura.

Le liste ordinate <ol> servono per descrivere elementi in sequenza temporare o di priorità, mentre le liste non ordinate <ul> servono per raggruppare elementi dello stesso tipo, e il loro uso, oltre che per elenchi semplici ha notevole senso semantico per menu di navigazione, elenchi di notizie e gallerie di immagini.

Le liste di definizione <dl> sono elenchi costituiti da termini (dt) con le relative definizioni (dd). Sono indicate per sezioni del tipo nome-descrizione oppure prodotto-descrizione, e anche per riportare dialoghi del tipo: interlocutore-frase.

Le citazioni in linea (costituite da una frase o una sua porzione) si realizzano con <cite> e <q>, per riportare più frasi o un discorso va usato il <blockquote>.

I <div> sono i contenitori generici per eccellenza: vanno usati per definire sezioni di pagina contenere elementi correlati (esempio: titolo + paragrafi relativi).

Infine, lo <span> è un elemento in linea totalmente neutro da personalizzare con i CSS, e non ha contenuto semantico effettivo: per questo andrebbe usato con molta parsimonia.

Altri articoli

Altre guide

Altre newsletter