Descrizione ed utilizzo dell'elemento hgroup in una pagina HTML 5

Il presente articolo è la traduzione dell' originale - "The hgroup element" - pubblicato su http://html5doctor.com/the-hgroup-element/. La traduzione viene riportata con il consenso dei curatori del sito. Eventuali immagini e porzioni di codice sono dei legittimi proprietari.

Uno dei nuovi elementi creati in HTML 5 è <hgroup>, utilizzato per raggruppare titoli con sottotitoli ad essi associati. Come mai è stato introdotto questo nuovo elemento quando si dispone già dell'elemento <header>? In questo articolo verrà fatta chiarezza per rispondere a questa domanda.

Cosa è l'elemento <hgroup>?

Di seguito viene riportato quanto definito dalle specifiche in merito a tale elemento:

L'elemento hgroup solitamente viene impiegato per raggruppare un insieme di elementi h1-h6 — Per raggruppare, ad esempio, un titolo di sezione ed un suo sottotitolo.
W3C Specification

Che cosa vuol dire?

<hgroup> funge da contenitore per una o più voci di elementi, eventualmente connessi, all'interno di un elemento <header>.  Esso può contenere solo un gruppo di elementi <h1>-<h6> e dovrebbe essere usato per sottotitoli, titoli alternativi, ecc...

Il modo più semplice per dimostrare l'utilizzo corretto dell'elemento <hgroup> è quello di mostrare alcuni esempi. Grazie al Dott. Oli per aver dato il consenso ad utilizzarne alcuni dei suoi.

Un articolo con un titolo

Un titolo consiste di un unico elemento <h1>; in questo modo non è richiesto nè l'elemento <hgroup> nè l'elemento <header>:

<article>
 <h1>Title goes here</h1>
  <p>Lorem Ipsum dolor set amet</p>
</article>

Un articolo con titolo e metadata

In questo esempio viene utilizzato l'elemento <header> per raggruppare il titolo e relativo metadata, per cui l'elemento <hgroup> non è richiesto:

<article>
  <header>
    <h1>Title goes here</h1>
    <p><time datetime="2010-03-20">20th March, 2010</time></p>
  </header>
  <p>Lorem Ipsum dolor set amet</p>
</article>

Articolo con titolo e sottotitolo

Un elemento <hgroup> contiene il titolo ed il sottotitolo dell'articolo:

<article>
  <hgroup>
    <h1>Title goes here</h1>
    <h2>Subtitle of article</h2>
  </hgroup>
  <p>Lorem Ipsum dolor set amet</p>
</article>

Articolo con titolo, sottotitolo e metadata

L'elemento <hgroup> contiene titolo e sottotitolo dell'articolo; l'elemento <header> racchiude un elemento metadata e l'elemento <hgroup>:

<article>
  <header>
    <hgroup>
      <h1>Title goes here</h1>
      <h2>Subtitle of article</h2>
    </hgroup>
    <p><time datetime="2010-03-20">20th March, 2010</time></p>
  </header>                
  <p>Lorem Ipsum dolor set amet</p>
</article>

Esempi reali

In Alex Gibson's MiniApps, si può vedere l'impiego dell'elemento <hgroup> contenente uno slogan dopo il titolo "MiniApps". (E' anche ciò che abbiamo fatto su questo sito se si visualizza il sorgente).

Screenshot del sito di Alex Gibson MiniApps

Perché usare <hgroup>?

E' una questione di struttura del documento. Quando si racchiudono dei titoli in un elemento <hgroup>, la struttura viene nascosta tranne il titolo di primo livello nel gruppo. Prendendo esempio ancora dal sito MiniApps, nel suo codice (anche se molto semplificato), Alex utilizza:

<header>
  <hgroup>
    <h1><a href="/">Mini Apps</a></h1>
    <h2>Web applications for iPhone, Android & other mobile platforms</h2>
  </hgroup>
</header>

<hgroup> contiene sia gli elementi <h1> che <h2>, ma la outliner include solo <h1>. Il tutto è illustrato nell'immagine seguente. (Si ignori "sezione senza titolo". E' stato causato dall'elemento <nav> ed una richiesta di modifica è stata inoltrata).

struttura del documento di miniapps.co.uk

Verrà trattata la struttura del documento in un altro articolo, evitando di entrare nei dettagli. È possibile fare una verifica delle proprie pagine in HTML5 Outliner per assicurarsi che si stiano utilizzando i titoli all'interno di <hgroup> in maniera corretta.

Conclusioni:

Nell'articolo è stato mostrato come utilizzare l'elemento <hgroup>. Per riassumere:

• Se si ha un semplice titolo con i soli elementi <h1>-<h6>, non serve utilizzare <hgroup>.
• Se si ha un titolo con sottotitolo/i o slogan (ad esempio più di uno consecutivo a <h1>-<h6>), raggrupparli in <hgroup>.
• Se si ha un titolo con sottotitolo/i e metadata associati a qualche sezione o articolo, avvalersi di <hgroup> e dei metadata all'interno di un singolo elemento <header>.