Web Design  »  Articoli  »  Web design 

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.

Altri articoli

Altre guide

Altre newsletter