Anche chi di noi sviluppa siti tableless, talvolta continua ad utilizzare un markup presentazionale, ossia ad organizzare il contenuto in base a come deve risultare il design del sito.
Il markup semantico invece struttura il codice delle nostre pagine web in base al contenuto e al suo significato.
Vi posso assicurare per esperienza personale che, oltre ad essere il modo più corretto di scrivere il markup, permette di risparmiare anche parecchio tempo nella stesura del codice.
A questo punto un esempio pratico potrà forse essere più esplicativo.
Dobbiamo realizzare un layout di questo tipo
Abbiamo 4 blocchi principali da inserire nella pagina:
- » il logo
- » il menu
- » il contenuto
- » i dati aziendali
La sezione del menu è evidenziata in giallo perchè negli esempi successivi vedremo come sarà possibile cambiare il layout mantenendo lo stesso markup.
Per scrivere un markup semantico non dobbiamo preoccuparci di come questi elementi andranno a posizionarsi nel design, quello sarà compito dei CSS in un secondo momento.
Il markup risultante quindi sarà
<div id="branding">LOGO</div>Invece di
<div id="navigation">MENU</div>
<div id="content">CONTENUTO</div>
<div id="site_info">DATI AZIENDALI </div>
<div id="header">LOGO</div>
<div id="column_left">CONTENUTO</div>
<div id="column_right">MENU</div>
<div id="footer">DATI AZIENDALI </div>
Provate adesso a visualizzare i 2 esempi senza foglio di stile…
» esempio con markup presentazionale
» esempio con markup semantico
Gli elementi disposti in modo semantico saranno visualizzati correttamente anche in assenza di foglio di stile perché sono nel loro ordine logico.
Chiaramente ognuno di questi 4 div andrà a sua volta strutturato al suo interno in modo semantico, quindi le voci di menu saranno una lista non ordinata ecc.
Ma quali sono i vantaggi del markup semantico?
Come ho detto in precedenza, una maggiore velocità nella scrittura del codice. Ma non si tratta solo di questo. Anche l’accessibilità del sito migliora sensibilmente e se i contenuti sono nel giusto ordine anche Google se ne accorgerà. Anche una maggiore riusabilità aggiungerei, infatti, se un giorno decidiamo che il menu lo vogliamo in alto…. Ma questo sarà l’argomento del prossimo articolo dove vedremo nel dettaglio 3 diverse soluzioni CSS per 3 diversi layout mantendo invariato il markup.
Segnalo intanto un progetto a cui parteciperò il prossimo 9 aprile, si tratta del CSS Naked Day. Chi aderisce a questo evento rimuoverà per un giorno intero l’intero foglio di stile dal proprio sito per presentarlo per così dire nudo, sostenuto solo da un buon markup…
I started using html 5 names for my productions. for navigation, for sidebars, and so on. It’s not perfect but it’s some kind of standard anyway.
Oh, parts of my text was lost there. “nav”, “aside” are the missing words.
Hi Andreas, because of IE issues for me is too early to start with HTML 5 in production pages. Of course I want to explore it in some test pages, anyway yours could be a valid option in order to get used to HTML5