L’importanza del codice semantico e i passi avanti dell’HTML5

La semantica è una parte della linguistica che studia il significato delle parole del linguaggio umano. In modo analogo, si può parlare di semantica anche per il codice HTML, cioè il linguaggio con cui vengono “scritti” i siti web.

Vuoi un nuovo sito? Richiedi subito un preventivo gratuito.

Il codice HTML è composto di tag, espressi tra i segni di maggiore e minore, che servono a dividere in parti una pagina web in modo da creare una struttura logica e gerarchica. In un documento web semanticamente corretto, un titolo sarà inserito nel tag <h1> (l’h sta per l’inglese heading, che significa appunto titolo), gerarchicamente più importante per esempio di un paragrafo di testo generico, che sarà inserito in un tag <p> (la p sta per l’inglese paragraph).

Il codice HTML

Ecco un esempio di codice semanticamente corretto:

<h1>Realizzazione di siti web</h1> <p>Meetweb è una web agency specializzata in web design, web application, web marketing e seo strategies. Realizza siti internet e portali innovativi per aziende e istituzioni pubbliche</p>

Nulla vieta di inserire il titolo in un tag <p>, quello destinato al paragrafo:

<p>Realizzazione di siti web</p> <p>Meetweb è una web agency specializzata in web design, web application, web marketing e seo strategies. Realizza siti internet e portali innovativi per aziende e istituzioni pubbliche</p>

In questo secondo caso, basterebbe stilizzare opportunamente il primo paragrafo in modo da distinguerlo dal secondo, magari dandogli una dimensione maggiore e trasformandolo in grassetto. L’utente, che non vede il codice HTML ma la sua “traduzione” in immagini e testi, non si accorgerebbe della differenza. Perché allora è importante scrivere il codice in modo corretto?

Gestione, accessibilità, motori di ricerca

I motivi principali sono tre:

Gestione – C’era un tempo in cui nel codice HTML, oltre a stabilire la struttura del documento web, venivano date informazioni anche sull’aspetto con cui il documento veniva presentato: colori, dimensioni dei caratteri, ecc. L’incorrettezza semantica in questo caso è ovvia: un titolo è sempre un titolo, sia esso nero o giallo. La possibilità di dividere struttura e presentazione è stata definitivamente realizzata con la nascita dei CSS, un altro tipo di codice che si occupa esclusivamente di stilizzare gli aspetti grafici della pagina web finale. Da allora è possibile scrivere codice che definisca esclusivamente la struttura del documento: se per esempio si volesse cambiare solo il colore di un link, non ci sarebbe bisogno di modificare il codice HTML ma solo il codice CSS. Questa separazione rende più agevole la gestione del progetto in caso di modifiche, riducendo il tempo di lavoro necessario a realizzarle.
Accessibilità – Esistono utenti che, a causa di handicap fisici legati principalmente alla vista, navigano su Internet utilizzando dei dispositivi chiamati screen readers: questi dispositivi “leggono” la pagina web all’utente per mezzo di sintesi vocale, e la leggono in base al codice, non alla sua presentazione visiva. Gli screen readers sono in grado di rilevare la differenza tra un <h1> e un <p> e di sottolineare questa differenza all’utente.
Motori di ricerca – Al pari degli screen readers, i motori di ricerca scansionano le pagine web in base al codice, non a ciò che viene visualizzato sullo schermo dall’utente. Se per l’utente un paragrafo graficamente reso come un titolo viene percepito, per l’appunto, come un titolo, per il motore di ricerca resta comunque un paragrafo. Tornando ai due esempi iniziali, il motore di ricerca stabilirà un miglior posizionamento (per ricerche ovviamente relative alla realizzazione di siti web) la prima pagina, in quanto a livello di codice il titolo ha più importanza rispetto al paragrafo: per il motore di ricerca, la prima pagina è più rilevante.

L’HTML 5: verso un codice più semantico.

L’HTML5 è la più recente fase evolutiva in corso del linguaggio HTML, ed una delle novità più importanti che presenta è proprio la possibilità di utilizzarlo per scrivere codice semanticamente più corretto. Nell’HTML4 sono già presenti molti tag di buon valore semantico per i singoli elementi: oltre all'<h1> e al <p> che abbiamo già visto, esistono per esempio il tag <img> per le immagini, il tag <a> per i link (dall’inglese anchor), ecc. Mancano invece dei tag semanticamente più specifici per gruppi di elementi: attualmente, un testo che comprenda dei titoli, dei paragrafi, un’immagine ecc. viene comunemente raggruppato in un tag <div> (dall’inglese division).

L'HTML5 introduce nuovi tag dallo specifico valore semantico

L’HTML5 sopperisce a questa mancanza introducendo dei nuovi tag di maggior valore semantico: <nav> sarà utilizzato per raggruppare i link di navigazione del sito, <hgroup> per titoli e relativi sottotitoli, <aside> per link o informazioni correlate al contenuto principale, ecc. Come si può dedurre, si tratta di tag più specifici rispetto al generico <div> attualmente utilizzato. L’HTML5 sarà quindi uno strumento in più nelle mani dei web designer per scrivere codice semanticamente più corretto, in altre parole che abbia più senso, con l’ottima conseguenza di amplificare i vantaggi sopra descritti.

Meetweb è al passo coi tempi: la nuova versione del sito, prossimamente online, sarà infatti scritta in codice HTML5.

Vuoi un nuovo sito web? Richiedi subito un preventivo gratuito

Se stai pensando che ci vuole un nuovo design per il tuo sito web, compila la form per ricevere un preventivo gratuito.

Nome *

Cognome *

Azienda *

Email *

Telefono *

Website *

Come ci hai conosciuto? *

Dipendenti *

Nota informativa sulla privacy autorizzazione Dlgs 196/2003

Oggetto: informativa sul trattamento dei Vostri dati personali ai sensi dell'articolo 13 del Dlgs 196/2003, recante il codice in materia di protezione dei dati personali.
 
Il D.Lgs. 196/2003 (codice sulla privacy) prevede che chi effettua trattamenti di dati personali è tenuto ad informare il soggetto interessato, su quali dati vengano trattati e su taluni elementi qualificanti il trattamento: esso deve avvenire con correttezza liceità e trasparenza, tutelando la Vostra riservatezza ed i Vostri diritti.
In ossequio a tale norma Vi forniamo le seguenti informazioni:
 
Natura dei dati trattati
Trattiamo i Vostri dati anagrafici e fiscali, nonché i dati di natura economica che sono necessari per lo svolgimento dei rapporti contrattuali, in essere o futuri, con la Vostra società.
Non siamo in possesso di alcun Vostro dato qualificabile come sensibile (art. 4 lettera d) del codice) o giudiziario (art. 4 lettera e) del codice).
 
Finalità del trattamento
I Vostri dati vengono trattati in relazione alle esigenze contrattuali, ed ai conseguenti adempimenti degli obblighi legali e fiscali, nonché per consentire una efficace gestione dei rapporti finanziari e commerciali.
I dati verranno trattati per tutta la durata del rapporto contrattuale ed anche successivamente, per l'espletamento di obblighi di legge e per finalità amministrative e commerciali.
 
Modalità del trattamento
Il trattamento dei dati avviene mediante l'utilizzo di strumenti e procedure idonei a garantirne la sicurezza e la riservatezza e potrà essere effettuato sia mediante supporti cartacei, sia con l'ausilio di mezzi informatici.
 
Obbligo o facoltà di conferire i dati
Per quanto concerne i dati che siamo obbligati a conoscere, al fine di adempiere agli obblighi previsti da leggi, da regolamenti e dalla normativa comunitaria, ovvero da disposizioni impartite da Autorità a ciò legittimate dalla legge e da organi di vigilanza e controllo, il loro mancato conferimento da parte Vostra comporta l'impossibilità di instaurare o proseguire il rapporto, nei limiti in cui tali dati sono necessari all'esecuzione dello stesso.
Per quanto riguarda i dati che non siamo obbligati a conoscere, il loro mancato ottenimento sarà da noi valutato di volta in volta, e determinerà le conseguenti decisioni, rapportate all'importanza per la nostra organizzazione dei dati richiesti e non conferiti.
 
Ambito di conoscenza dei Vostri dati
Le seguenti categorie di soggetti possono venire a conoscenza dei Vostri dati, in qualità di responsabili o incaricati del trattamento, nominati dalla scrivente, titolare del trattamento:
·   dirigenti, amministratori e sindaci
·   uffici di protocollo e segreteria interni
·   consulenti esteri e commercialisti
·   istituti di credito ed assicurazioni
·   società di revisione - revisori contabili
·   addetti alla contabilità ed alla fatturazione
·   addetti alla commercializzazione dei servizi
·   agenti e rappresentanti.
 
Comunicazione e diffusione
I Vostri dati non verranno da noi diffusi, con tale termine intendendosi il darne conoscenza a soggetti indeterminati in qualunque modo, anche mediante la loro messa a disposizione o consultazione.
I Vostri dati potranno da noi essere comunicati, con tale termine intendendosi il darne conoscenza ad uno o più soggetti determinati, nei seguenti termini: 
-a soggetti che possono accedere ai dati in forza di disposizione di legge, di regolamento o di normativa comunitaria, nei limiti previsti da tali norme
-a soggetti che hanno necessità di accedere ai Vostri dati per finalità ausiliare al rapporto che intercorre tra Voi e noi, nei limiti strettamente necessari per svolgere i compiti ausiliari (si citano a titolo indicativo gli istituti di credito e gli spedizionieri)
-a soggetti residenti in Paesi facenti parte della Comunità Europea ed a soggetti residenti in Paesi Extra-UE per motivi strettamente legati all'esecuzione dei contratti in essere con la vostra organizzazione.
-a soggetti nostri consulenti, nei limiti necessari per svolgere il loro incarico presso la nostra organizzazione, previo nostra lettera di incarico che imponga il dovere di riservatezza e sicurezza.
 
I Vostri diritti
Riportiamo di seguito l'estratto dell'articolo 7 Dlgs 196/2003, per ricordarVi che potete esercitare nei nostri confronti i seguenti diritti: ottenere la conferma dell'esistenza di dati personali che Vi riguardano, anche se non ancora registrati, e la comunicazione in forma intelligibile, l'indicazione dell'origine dei dati personali, nonché delle finalità e modalità del trattamento; l'indicazione della logica applicata nei trattamenti effettuati con l'ausilio di strumenti elettronici; l'aggiornamento, la rettificazione ovvero, quando vi avete interesse, l'integrazione dei dati; la cancellazione, la trasformazione in forma anonima o il blocco dei dati trattati in violazione di legge; la cancellazione, la trasformazione in forma anonima o il blocco dei dati di cui non è necessaria la conservazione, in relazione agli scopi per i quali i dati sono stati raccolti o successivamente  trattati; l'attestazione che l'aggiornamento, la rettificazione, l'integrazione, la cancellazione, la trasformazione in forma anonima o il blocco sono stati portati a conoscenza, anche per quanto riguarda il contenuto, di coloro ai quali i dati sono stati comunicati o diffusi, tranne che nei casi in cui tale adempimento si riveli impossibile o comporti un impiego di mezzi manifestamente sproporzionato rispetto al diritto tutelato; il diritto di opporvi, in tutto o in parte, per motivi legittimi, al trattamento dei dati personali che Vi riguardano, ancorché pertinenti allo scopo della raccolta; il di ritto di opporvi, in tutto o in parte, al trattamento di dati personali che Vi riguardano a fini di invio di materiale pubblicitario o di vendita diretta o per il compimento di ricerche di mercato o di comunicazione commerciale.
 
Responsabile del trattamento dei dati
Per esercitare tali diritti potete rivolgerVi al seguente responsabile, da noi all’uopo nominato ai sensi dell’articolo 13 lettera f) Dlgs 196/2003: Meetweb S.r.l. Via del Parco Margherita, 32 – 80121 Napoli – tel 081.19364584 – fax 081.2140697
Titolare e responsabili del trattamento
Titolare del trattamento è Meetweb S.r.l. i cui dati anagrafici sono riportati nell’intestazione della presente lettera.
L’elenco completo di tutti i responsabili per il trattamento dei dati personali, sia interni che esterni, da noi nominati è reperibile su Vostra richiesta presso i nostri uffici.
Meetweb S.r.l. – Il legale rappresentante

Accetto *

5 Commenti • lascia un commento

si, ma con quali browser è compatibile? non è prematuro creare un sito web in html… tutto sommato il linguaggio non è ancora ben definito… o no?

scettico 25 marzo 2010, 23:31
E’ vero, i lavori sull’HTML5 sono ancora in corso, e la data stimata per il completamento di questa nuova specifica è il 2022 (!). Ed è vero che esiste un problema di compatibilità con i vari browser dal momento che, a seconda dei casi, vengono supportati elementi diversi dell’HTML5 (il migliore in questo senso è Safari, il peggiore Internet Explorer). Ma è vero anche che possono essere adottate delle soluzioni per poter aggirare la mancanza di supporto dei browser: si tratta di soluzioni (lato server o lato client) che permettono di riconoscere il browser utilizzato dall’utente per visualizzare il sito e di operare sul codice HTML in modo che sia compatibile con il browser in questione.

Che valga la pena utilizzare queste tecniche dipende probabilmente dalle circostanze e dai punti di vista. Iniziare a scrivere codice HTML5 è comunque un buon modo per rimanere aggiornati e non trovarsi impreparati nel momento in cui la capacità dei browser di supportarlo sarà più grande di quanto non lo sia adesso.

Graziano Scaldaferri 26 marzo 2010, 10:36
Bello spunto! E’ bello sapere che c’è ancora chi si preoccupa di cogliere le differenze tra quel che viene mostrato all’utente che naviga un sito e la correttezza del codice HTML. Spesso si pone solo l’accento sul risultato finale senza preoccuparsi di come lo si raggiunge (in alcuni casi calpestando gli standard HTML).

Giorgio Montaldo 10 ottobre 2010, 14:24
Sono d’accordo con te. In più come ho scritto nel post scrivere codice corretto è un vantaggio non solo per gli utenti ma anche per chi realizza il sito, insomma conviene a tutti.

Graziano Scaldaferri 11 ottobre 2010, 17:50
Pingback: L’HTML5 e i video | meetweb blog

il blog di meetweb web, comunicazione e marketing

Cambia Layout

L’importanza del codice semantico e i passi avanti dell’HTML5

Gestione, accessibilità, motori di ricerca

L’HTML 5: verso un codice più semantico.

Vuoi un nuovo sito web? Richiedi subito un preventivo gratuito

Articoli correlati

5 Commenti • lascia un commento

Scrivi un commento