La scrittura di un buon codice HTML è il fondamento
dell'intera codifica di un sito web e classi e ID sono tra i
punti di contatto principali per la personalizzione con i fogli di stile.
Vedremo in questo appuntamento alcuni consigli per scrivere un buon markup
pensato per la personalizzazione con i fogli di stile ma soprattutto
basato sui contenuti, attraverso alcuni consigli pratici. Questo articolo
è il proseguimento ideale di
Scrivere codice HTML semantico.
Cominciamo subito.
1. I contenuti prima di tutto: veicolare l'informazione senza CSS
Una delle cose fondamentali da tener presente nello sviluppo web è che
tutto inizia dal contenuto, poi segue la struttura e infine la presentazione.
Un buon markup deve servire anzitutto i contenuti prima della presentazione.
Il processo di sviluppo di una pagina o sito web è molto soggettivo,
ma è importante prima di procedere con i fogli di stile consultare la pagina
realizzata: in maniera molto simile verrà visualizzata su un browser testuale
e altri dispositivi alternativi.
2. Scrivere markup semantico: usare l'elemento giusto al momento giusto
La logica è semplice: l'HTML ci offre moltissimi elementi, ciascuno con uno
scopo. Conoscerli a fondo ci aiuta a strutturare al meglio i contenuti.
Come abbiamo detto beneficia di un buon markup semantico una fascia
più ampia di utenza, ma non solo: anche i motori di ricerca lo preferiscono.
3. Ok per i div, un po' meno per gli span
Div e span sono gli elementi neutri per eccellenza, rispettivamente block-level
e inline. L'uso dei div è spesso indispensabile per contenere
le sezioni principali di una pagina e racchiudere elementi logicamente correlati
laddove non vi sia un'alternativa semantica.
Gli span al contrario non hanno uno scopo generico, e il più delle volte vengono
usati per servire la presentazione o, erroneamente, per sostituire elementi appropriati.
Ad esempio, girovagando in rete e curiosando tra il codice, mi è capitato diverse volte
di vedere code del tipo span class="label" oppure span class="grassetto":
scelte simili sono da evitare in favore degli elementi label e strong.
4. Capire classi e id
Capire a fondo la differenza tra id e classi è fondamentale per scrivere
un buon markup. Gli id individuano univocamente elementi e/o
sezioni di pagina, mentre le classi hanno la capacità di definire gruppi
(classi appunto) di elementi che hanno stessa funzionalità o scopo.
Mentre l'uso degli id è indispensabile, quantomeno per le varie sezioni
di pagina (header, navigazione, contenuto e footer), l'uso delle classi
andrebbe limitato. Soprattutto durante i primi passi di sviluppo con HTML
e fogli di stile, c'è la tendenza naturale ad abbondare con l'uso delle classi.
Non sono nocive e a volte sono indispensabili, ma andrebbero tenute al minimo:
soprattutto nei casi in cui si potrebbe usare un unico id oppure avvantaggiarsi
del selettore discendente.
5. Classi e id con la semantica in mente
La scelta di nomi di classi e id è importante, dato che aggiunge informazione
sugli elementi di pagina e offre il punto di contatto principale per il foglio
di stile. C'è da tener presente però che nomi di classi e id non dovrebbero mai
indicare la presentazione di un elemento, ma il suo scopo o la sua funzione.
In tal senso cose del tipo div id="left" e div id="right"
per un layout a due colonne andrebbero evitati a favore di div id="content"
e div id="sidebar". Altro esempio: strong class="warning"
sarebbe da preferire a strong class="testorosso".
6. Evitare la classite
Vedremo ora due casi in cui l'uso delle classi è inappropriato o superfluo.
Il seguente codice:
<div id="header">
<h1 class="titolo">Qui il titolo</h1>
</div>
si può migliorare per due motivi. Il primo è che l'uso della classe "titolo"
non ha senso, dato che h1 è già titolo senza doverlo precisare. Il secondo motivo
è che se l'uso della classe è per favorire la scrittura del foglio di stile, si può
pensare ad un'alternativa più leggera:
<div id="header">
<h1>Qui il titolo</h1>
</div>
In questo caso basterà usare il selettore discendente nel foglio di stile.
La seguente regola viene specificata per l'h1 all'interno
del div id="header" e solo a quello:
div#header h1{
font-size: 200%
}
Allo stesso modo, usando il selettore discendente si può
pensare di trasformare il seguente codice eliminando la classe "link":
<div id="menu">
<ul>
<li><a class="link" href="#">Home</a></li>
<li><a class="link" href="#">Prodotti</a></li>
<li><a class="link" href="#">Servizi</a></li>
<li><a class="link" href="#">Contatti</a></li>
</ul>
</div>
7. Quando il markup minimale non basta
L'uso di elementi e contenitori aggiuntivi nel markup potrebbe risultare in contraddizione
con quanto detto finora. Ma ci sono alcuni casi in cui a parer mio è accettabile, ovvero:
- quando sono necessari per evitare hack o workaround
- per estendere la compatibilità sui browser
- per necessità di impaginazione o di grafica
- quando si va a migliorare o ripristinare l'accessibilità ai contenuti
(per esempio l'image replacement)
In alcuni casi sarà difficile trovare un nome di attributo semantico per classi e id,
ma è importante provarci. In ogni caso è importante a parer mio tenere il numero di elementi
aggiuntivi nel markup al minimo, e se possibile usare contenitori aggiuntivi piuttosto che
elementi vuoti. E tener presente che il contenuto, il suo ordine naturale, i fondamenti
e la struttura del markup non andrebbero mai compromessi.
