Sappiamo già cos'è l'(X)HTML e conosciamo anche i vantaggi del suo uso come markup.
Sappiamo scrivere codice validato secondo il W3C e usare i CSS per presentare la nostra pagina web. Ma siamo sicuri di aver usato i tag (X)HTML nel modo corretto? E soprattutto qual è questo modo?
I tag e il loro valore semantico
Cosa vuol dire “valore semantico”? Significa dare un significato univoco e ben preciso ad un elemento della pagina. Significa utilizzare i tag per l'uso per il quale sono stati creati, senza snaturarli per motivi tecnici. Significa facilitare la navigazione a tutti e rendere il codice accessibile, una delle maggiori priorità per un web designer.
L'importanza della semanticità del codice è stata rafforzata proprio dall'evoluzione dell'HTML in XHTML. Il secondo, infatti, nato dalla fusione di HTML e XML, tenta di rendere il codice un metodo per definire la struttura di un sito e non la sua presentazione grafica, affidata invece ai CSS. Non devono essere presenti infatti nel documento XHTML gli attributi di presentazione normalmente associati ai tag, che vengono affidati invece al file CSS esterno o a stili inclusi nella <head> della pagina.
Ora il codice, rispondendo ad un'etica puramente di presentazione del contenuto, dovrebbe essere dunque “pulito” da questi tag presentazionali (quali <font>, <span style...>, etc), pertanto:
<p>sarà il nostro paragrafo<h1>,<h2>, etc, saranno i nostri titoli<ul>, <ol>, <dl>e i singoli elementi relativi saranno le nostre liste, e come tali usati anche per la struttura dei menu di navigazione<blockquote>, <abbr>, <cite>andrebbero usati per le citazioni di testo<a>per ancore e i comuni link ipertestuali<table>per intabellare e formattare i dati<strong>e<em>per evidenziare testo in grassetto o corsivo<div>come blocco di divisione della struttura, che esso racchiuda una colonna, un piè di pagina o altro blocco del sito.
E ci siamo limitati a citare i più importanti.
I <div> formano la struttura principale del sito...
...ed è pertanto utile che la semanticità del codice si manifesti dando ai <div> dei nomi utili a capirne l'utilità e non l'aspetto presentazionale del documento (X)HTML.
Ad esempio, in un documento come questo:
... <body> <div id="fasciasuperiore"></div> <div id="contenitore"> <div id="sinistra"></div> <div id="navigazionedestra"></div> </div> <div id="footer"></div> </body> </html>
c'è un errore fondamentale che è quello di aver usato dei nomi che identificano troppo chiaramente la posizione e quindi l'aspetto presentazionale dei vari <div>. È invece più utile e semantico identificare i vari div con il loro valore, significato, utilità all'interno della pagina. Sarebbe più corretto quindi in questo esempio scrivere:
... <body> <div id="testata"></div> <div id="contenitore"> <div id="pagina"></div> <div id="menu"></div> </div> <div id="footer"></div> </body> </html>
Ultimi articoli HTML/XHTML
Guide HTML/XHTML
Guida HTMLL'HTML è il principale linguaggio di pubblicazione di pagine Web.... |
Guida XHTMLXHTML è il nuovo standard per il WEB ed è la transizione verso... |
Newsletter @Daily HTML.it
Ogni mattina, dal lunedì al venerdì, le novità pubblicate su tutti i siti tecnici del network HTML.it: articoli, guide, notizie dal Web, blog e molto altro.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Google AdWords Base27 Febbraio 2012 a Milano |
|
|
Corso Webmaster base12 Marzo 2012 a Milano |
|
|
Corso Webmaster base20 Febbraio 2012 a Roma |
|
|
Corso Google AdWords Base28 Marzo 2012 a Roma |