Lezioni di HTML 5 Lezione 3 – Semantica

Nel precedente articolo abbiamo visto come utilizzare gli elementi semantici dell’HTML 5 nella nostra pagina web.

Oggi approfondiremo gli aspetti relativi alla semantica di questi tag.

Un principale vantaggio derivante dall’utilizzo di questi elementi è la standarizzazione degli elementi, ovvero a differenza dell’HTML 4.01 abbiamo una serie di elementi specifici da utilizzare per diverso scopo.

Questo di fatto evita la definizione di div con classi ed id che risultano generici e variano a seconda delle abitudini di chi sviluppa la pagina.

Oltre a questo l’HTML 5 presenta un nuovo algoritmo per la definizione dell’outline del documento che modifica il normale modo di definire le intestazioni nel file html.

Facciamo un passo indietro, nell’HTML 4.01 l’unico modo per definire l’outline del documento è quello di utilizzare gli elementi h1/h6 con il rispettivo valore semantico.

Per esempio:

<h1>Titolo del sito</h1>
 <h2>sottotitolo del sito</h2>
<h3>Titolo del post</h3>
 <h4>Sottotitolo del post</h4>
<h3>Titolo del post</h3>
 <h4>Sottotitolo del post</h4>

Notate come h1 sia univoco nella pagina e rappresenti il titolo del sito, il sottotitolo del sito è definito con <h2>, mentre h3 e h4 rappresentano rispettivamente titolo e sottotitolo di una sezione/contenuto della pagina.

In HTML 5 possiamo modificare questa situazione come segue:

<header>
 <hgroup>
 <h1>Titolo del sito</h1>
 <h2>sottotitolo del sito</h2>
 </hgroup>
 </header>
<article>
 <hgroup>
 <h1>Titolo del post</h1>
 <h2>Sottotitolo del post</h2>
 </hgroup>
 </article>
<article>
 <hgroup>
 <h1>Titolo del post</h1>
 <h2>Sottotitolo del post</h2>
 </hgroup>
 </article>

Analizziamo nel dettaglio le differenze.

L’elemento h1 si ripete

Nell’HTML 5 l’utilizzo dell’elemento <article> definisce una sezione indipendente della pagina dove appunto posso riutilizzare l’elemento h1 dove avrà valore di titolo della sezione/contenuto e non della pagina.

Utilizzo di hgroup

L’utilizzo di hgroup ha lo scopo di raggruppare insieme intestazioni diverse, nel caso del primo elemento all’interno dell’header h1 avrà valore di titolo e h2 di sottotitolo, questo permette di utilizzare un’intestazione con valore associato ad altre intestazioni presenti in quel contesto senza che il significato venga mistificato da elementi uguali presenti sulla pagina.

Come abbiamo visto l’HTML 5 tratta diversamente la semantica degli elementi da altri linguaggi di markup ma offre indubbiamente una serie di vantaggi che rendono il codice molto più modulare e semantico.

Nel prossimo articolo vedremo come verificare il supporto delle funzionalità più avanzate dell’HTML5 sul browser dell’utente.

Passate a trovarmi come sempre su howtoweb.it o abbonatevi ai feed rss per rimanere aggiornati sugli ultimi articoli.

Alla prossima

Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Articoli e contrassegnata con , . Contrassegna il permalink.

4 risposte a Lezioni di HTML 5 Lezione 3 – Semantica

  1. Engelium scrive:

    Molto interssante. Questo nuovo metodo di intendere gli elementi h1/h6 mi era totalmente sfuggito ed in effetti può risultare davvero utile nel migliorare la semantica di un sito. Però non posso fare a meno di chiedermi come potrebbe interpretare la cosa un motore di ricerca come Google che (correggetemi se sbaglio) mi pare dia parecchia importanza alla struttura delle intestazioni H1 per la corretta indicizzazione della pagina… cosa accadrà nel momento in cui incontrerà diversi H1 ?

    Ah e complimenti per quasta serie di articoli. Finora mi ero documentato solo su fonti anglofone ma è sempre bello leggere qualcosa in italiano :P

    • Mauro Accornero scrive:

      Grazie dei complimenti Engelium e della domanda. L’utilizzo di più h1 nella pagina come scritto nell’articolo non dovrebbe causare problemi ai bot di google, considerato che l’utilizzo degli h1, article e hgroup permette di definire l’outline document della pagina attraverso il logaritmo dell’html 5 anche google e i suoi bot dovrebbero distinguerlo senza problemi. Dico dovrebbero perchè non ho qui un bot a cui chiedere come vede l’outline document :) ma considerato che google è permissivo su strutture html molto più obsolete credo non neghi il supporto ad una tecnologia già supportata e senza dubbio più funzionale.

    • Sergio scrive:

      La posizione “ufficiale” di google sui multipli H1 è comunque permissiva nei limiti del buon senso http://www.youtube.com/watch?v=GIn5qJKU8VM quindi non dovrebbero esserci rischi a ripetere h1 e h2 sempre mantenendo un senso.

      Che poi effettivamente ho qualche dubbio che google legga correttamente la semantica dell’HTML5 riducendo la frammentazione delle pagine con più argomenti: c’è da sperimentare…

  2. Monica scrive:

    in effetti hilltop aveva problemi di indicizzazione su quello ma cambiando poi con caffeine dovrebbe leggerli, gli h1, senza problemi …

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>