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.
Alcuni esempi
Soprattutto all'inizio della scrittura diretta del codice e della progettazione di pagine web con i CSS, credo che tutti abbiamo scritto codice non semantico. Il tutto sta nell'acquisire la conoscenza e l'esperienza, e poi tutto si riduce a una questione di logica.
La scrittura di codice semantico riguarda anche l'attribuzione di classi e id agli elementi. A tal proposito, rimando all'articolo: Selettore universale (universal selector).
Una buona regola per capire se davvero abbiamo scritto un buon markup è visualizzare le pagine senza fogli di stile: i contenuti sono ben organizzati? I titoli, l'enfasi e il resto? A rendere gradevole visivamente la nostra pagina ci penseranno i CSS in un secondo momento. Ma non indugiamo oltre e vediamo alcuni esempi di codice non semantico con la corrispettiva versione semantica.
Questa è la versione non semantica per un titolo:
<p class="titolo">Introduzione alla semantica</p>
E la corrispettiva versione semantica:
<h2>Introduzione alla semantica</h2>
Analogamente, cose del tipo span class="label" oppure span class="grassetto" sono da evitare in favore rispettivamente dei tag label e strong.
Vediamo un esempio di codice non semantico per un menu di navigazione:
<div id="menu">
<p><a href="#">Home page</a></p>
<p><a href="#">Prodotti</a></p>
<p><a href="#">Contatti</a></p>
</div>
L'esempio sopra, o un analogo che invece dei paragrafi usa i div, un caso di non-semanticità. I paragrafi servono a contenere delle frasi, mentre i div sono contenitori generici. Se si pensa che un menu di navigazione è un elenco (quindi una lista) di link, il codice sopra diventa per logica:
<ul id="menu">
<li><a href="#">Home page</a></li>
<li><a href="#">Prodotti</a></li>
<li><a href="#">Contatti</a></li>
</ul>
Nel momento di attribuire classi e id nell'HTML, sarà importante anticipare la progettazione del CSS. Vediamo un esempio che si può migliorare molto:
<div>
<div class="news">Prima ...news</div>
<div class="news">Seconda news</div>
<div class="news">Terza news</div>
</div>
La seguente versione è senza dubbio migliore:
<div id="news">
<div><p>Prima... </p></div>
<div><p>Seconda </p></div>
<div><p>Terza... </p></div>
</div>
Il codice della seconda versione si presenta migliore per tre motivi. Il primo che una sezione di pagina ha un suo scopo e contiene elementi tutti dello stesso tipo, conviene attribuirgli un id e usare i CSS e il selettore discendente. Il secondo motivo è che è una buona pratica separare contenitore e contenuto: in tal caso, i paragrafi all'interno dei div, seppur non necessari, ci consentiranno di strutturare meglio il documento e ci agevoleranno nella presentazione. Il terzo motivo è che la seconda versione pesa di meno in termini di caratteri, e contribuirà a rendere il sito più leggero.
Scrivere markup semantico vuol dire anche limitare al minimo gli elementi con puro scopo presentazionale. Scopo del codice HTML è servire i contenuti, non la grafica. Ecco un esempio di codice HTML presentazionale, e quindi non semantico:
<div class="spacer"></div>
Se lo scopo del div vuoto è quello di aggiungere spazio tra l'elemento che lo precede e quello che lo segue, quasi sicuramente riusciremo ad evitarlo dichiarndo il margin su uno dei due elementi che vogliamo separare. Altro esempio da non seguire:
<div class="sfondo-bottom">
<div class="sfondo-top">
<div class="contenuto">Contenuto qui</div>
</div>
</div>
Una versione decisamente migliore, se pensiamo che la maggior parte delle sezioni testuali andrebbe preceduta da un titolo:
<div class="box">
<h3>Titolo</h3>
<p>Contenuto qui..</p>
</div>
Da notare che la presentazione delle due porzioni di codice sopra mediante CSS può avvenire allo stesso modo, anzi la seconda versione si presta maggiormente, dato che il contenuto è strutturato meglio.
Una buona regola è che se non riusciamo a trovare per un elemento un nome di classe o id che ne descriva la funzione in relazione al contenuto, nella maggior parte dei casi quell'elemento ha scopo puramente presentazionale.
Riepiloghiamo i punti necessari per un codice HTML semantico:
- l'uso dei tag per il loro scopo
- attribuire classi e id a favore dei fogli di stile
- separare contenitore e contenuto
- limitare al minimo gli elementi con puro scopo presentazionale
Semantica e tabelle per l'impaginazione
La progettazione di siti table-less non nasce da una moda. Con l'HTML 4.0, i div, i fogli di stile è stata data al web designer l'alternativa all'impaginazione dei siti web con le tabelle. Con l'aumento del supporto dei fogli di stile e la loro promozione in rete, lo sviluppatore ha a disposizione strumenti di impaginazione ben consolidati e molto più adeguati delle tabelle. La questione è che, a prescindere dai CSS, l'uso delle tabelle per il layout non ha nessun motivo semantico, dato che le tabelle andrebbero usate esclusivamente per dati tabellari.
Il processo di realizzazione di siti table-less può risultare complesso soprattutto per chi è abituato all'uso di editor visuali. Il primo punto munisirsi di buon editor testuale o uno visuale da usare in modalità testo (tra i freeware HTML Kit, tra quelli a pagamento TopStyle, di cui c'è una versione freeware, e il notissimo Dreamweaver). Successivamente le guide di HTML.it sono un buon punto di partenza, per poi arrivare ad approfondire nelle varie sezioni di approfondimento.
Semantica e motori di ricerca
Un sito progettato con codice semantico, e quindi con div e CSS, risulta molto più leggero in termini di codice HTML rispetto a un analogo con le tabelle: questo risulta gradito ai motori di ricerca. Usare codice semantico e in particolare i titoli h1, h2, h3 con pertinenza al contenuto, oltre che paragrafi e liste aiuta gli spider dei motori nell'indicizzazione.
Semantica e CSS
Nel markup andranno evitati l'uso di immagini senza contenuto visuale effettivo, gli attributi presentazionali HTML ed elementi per servire la grafica: tutto ciò che è presentazione andrà delegato al CSS. I fogli di stile, che consentono di separare contenuto e struttura dalla presentazione, sono strettamente legati al codice semantico. A tal proposito due cose essenziali per la buona scrittura del codice sono la conoscenza del visual formatting model (di cui si può trovare un introduzione nell'articolo Capire il box model ed in quello dedicato ai selettori. Infine, è sempre una buona pratica la validazione del codice HTML. Alla prossima.
