Ecco un libro molto interessante che tratta di semantica nello sviluppo di siti web. Andiamo per gradi… innanzi tutto chiariamo cosa io intendo per uso corretto della semantica nel markup. Semplice, i marcatori (<h1>,<h2>, <p>, <a>, etc…) hanno un significato ben preciso e devono essere usati per adempiere allo scopo per cui sono stati inventati. Ad esempio, i tag hx servono per i titoli e quindi devono essere usati per identificare i titoli, il tag <p> identifica un paragrafo e cosi via.
Potremmo andare avanti a lungo ma andrei fuori tema. Suggerisco quindi alcune letture sull’argomento semantica e markup (lungi da me il ritenere che siano esaustive, ma sicuramente non fanno male):
- Scrivere codice HTML semantico di: Alessandro Fulciniti;
- Semantica e markup su biroblu;
- headings parte uno, due e tre sempre su biroblu.
La semantica nel markup è, a torto, spesso trascurata dagli sviluppatori a vantaggio di grafica ed effetti speciali. Dico a torto per due motivi principali (… o meglio per ora questi mi vengono in mente ma vi assicuro che bastano anche se non sono i soli):
- In molti ci hanno dimostrato che è possibile coniugare un aspetto grafico accattivante con un buon markup;
- L’uso corretto della semantica aiuta il posizionamento nei motori di ricerca.
Torniamo ora al libro di Allsopp dicendo che i miroformats o microformati ci aiutano ad andare oltre alla semantica intesa come uso corretto dei marcatori. Come? Suggerendo delle strutture (cioè blocchi di codice XHTML) atte a supportare lo sviluppo di codice semantico. Vi ho confuso le idee? Cerco di spiegare il tutto con un esempio: supponiamo di voler identificare gli estremi di un contatto relativo ad un professionista (nome, cognome, indirizzo, città, telefono, mail, fax etc), come possiamo definire un codice XHTML semanticamente corretto? Che io sappia non esiste alcun marcatore idoneo allo scopo… ma certo!!! utilizzando il microformato hCard!!!! Eccone un esempio:
<div id="hcard-Mario-Rossi" class="vcard">
<span class="fn">Mario Rossi</span>
<div class="org">Mario Group Spa</div>
<a class="email" href="mailto:mario@mario.it">mario@mario.it</a>
<div class="adr"><div class="street-address">Via roma, 125</div>
<span class="locality">Milanello</span>,
<span class="postal-code">00234</span>
<span class="country-name">Italia</span>
</div>
Tutti i web designer concorderanno che è possibile, attraverso i CSS, formattare questo codice in modo da presentarlo in 1000 modi diversi uno più bello ed accattivante dell’altro!
Ma come posso ricordare tutte queste calssi e come posso strutturare in modo semplice e veloce questo microformato? Semplice, andando nel sito dedicato ai microformats ed in particolare utilizzando il costruttore automatico di hCards!!
Avremo modo di tornare sull’argomento microformats, nel frattempo vi consiglio di leggere questo libro che spiega in modo semplice e diretto cosa sono, come utilizzarli e come svilupparne di nuovi.
… a dimenticavo, buona lettura
Articoli correlati
Tags: J. allsopp, libri, Microformats, semantica, XHTML semantico