L’importanza della semantica nel codice XHTML e nei fogli di stile
L’uso corretto del linguaggio
XHTML e di quello dei
fogli di stile relativo assume una grande importanza nello sviluppo di un sito web e nella sua gestione (aggiornamento periodico, restyling grafico e strutturale).
In termini pratici l’intero processo di creazione del sito internet ne guadagna.
XHTML è l’acronimo di eXtensible HyperText Markup Language. Linguaggio di marcatura. Uso di tag, quindi. Ed ogni tag è stato introdotto nel linguaggio con una sua precisa funzione. Omettere un tag e sostituirlo con un altro improprio è un grave errore di scrittura del codice. Come ogni linguaggio (ad esempio l’Italiano) anche il linguaggio (X)HTML ha delle regole, che devono essere rispettate. Se parlate o scrivete in dialetto non tutti potranno capirvi. Se parlate o scrivete invece in perfetto italiano sarete capiti da tutti. Lo stesso può essere esteso al linguaggio (X)HTML: un sito con un codice validato è un sito che migliora la sua compatibilità con i vari browser. E’ così interpretato meglio dai browser rispetto ad un sito che presenta errori nel codice.
L’uso della semantica vi porterà ad un non indifferente risparmio di codice, ad un miglioramento del codice stesso, ad una più logica organizzazione della struttura delle pagine web.
Esempi pratici sull’uso della semantica
I titoli
<span class=”titolosezione”>I nostri prodotti</span>
In questo esempio non abbiamo utilizzato la semantica. Per i titoli esistono appositi tag, gli “hn“, che vanno da “h1” ad “h6“, in ordine decrescente di importanza.
Correttamente si dovrebbe scrivere:
<h1>I nostri prodotti</h1>
Anche dal punto di vista dell’accessibilità è importante far uso di titoli, che offrono una sorta di introduzione all’argomento trattato e ne migliorano la leggibilità.
I paragrafi
Il tag <p> indica un paragrafo e serve quindi a racchiudere delle frasi, che spesso si trovano contenute invece nel tag <div>, un contenitore generico.
Elenchi e liste
Questi sono i nostri prodotti:
Carta da lettere<br />
Inchiostri<br />
Calamai<br />
Buste<br />
Il tag <br /> serve per mandare a capo una o più frasi contenute in un periodo. Per rappresentare un elenco esistono gli elementi di lista.
Il codice corretto è (lista non ordinata):
<ul>
<li>Carta da lettere</li>
<li>Inchiostri</li>
<li>Calamai</li>
<li>Buste</li>
</ul>
Che visualizzata è:
·Carta da lettere
·Inchiostri
·Calamai
·Buste
Oppure (lista ordinata):
<ol>
<li>Carta da lettere</li>
<li>Inchiostri</li>
<li>Calamai</li>
<li>Buste</li>
</ol>
Che visualizzata è:
- Carta da lettere
- Inchiostri
- Calamai
- Buste
L’uso della semantica è vivamente consigliato non solo nella scrittura del codice (X)HTML, ma anche nel foglio di stile.
Nominate le vostre classi in funzione dell’elemento a cui sono riferite e non tenendo conto di come apparirà l’elemento stesso con le regole assegnategli. Lasciate stare quindi i vostri gusti personali, non c’è bisogno di essere eleganti né descrittivi per stabilire il nome di una regola. Tutto ciò non trova riscontro né posto all’interno di un codice che ragiona secondo una precisa logica. Che non bada all’eleganza ma alla semplicità. L’eleganza è la semantica stessa, che già per suo conto descrive ciò che rappresenta.
Assegnare nomi alle regole
Nome errato: <div id=”boxblu”>
In questo modo al contenitore generico “div” avete associato una regola chiamata “boxblu“, che lascia intendere abbia un colore di fondo blu (o anche semplicemente un bordo di colore blu).
Nessun problema, se la grafica del vostro layout richiede un box di colore blu.
Ma avete pensato a cosa accadrebbe se, dopo un restyling grafico del sito, quel box non potrà più essere blu ma rosso?
Lasciare la regola associata a quel div con quel nome creerà inevitabilmente confusione. Cambiare il nome alla regola richiederà tempo, perché dovrà essere cambiato l’id a tutte le pagine che lo usano.
Nome giusto: <div id=”news”>
In questo esempio abbiamo utilizzato la semantica. A quel div è stata associata la regola “news“. Il nostro box delle news, quindi, potrà benissimo avere un colore di fondo blu. Ad un restyling del sito ci basterà cambiare i valori all’interno della regola del foglio di stile per associare al box delle news un colore di fondo rosso, col risultato che avremo operato su un unico file, anziché su tutte le pagine del sito.
La semantica deve apparire già in frase progettuale, quando si suddivide la materia e si decide della struttura organica e grafica di un sito: header, main, menu di navigazione, footer, ecc. Il grosso del lavoro va fatto quindi prima, per lavorare meno dopo.
- tratto da FastPopularity.com
Informazioni sull'Autore
Daniele Imperi - web designer
Fonte: Article-Marketing.it