Hgroup

Funzioni e dati tecnici

L'elemento <hgroup> rappresenta l'intestazione di una sezione. L'elemento viene utilizzato per raggruppare un insieme di elementi h1-h6, quando il titolo ha più livelli, come sottotitoli, titoli alternativi o slogan.

<hgroup>
  <h1>Questo è il titolo</h1>
  <h2>Questo è un sottotitolo</h2>
</hgroup>

La vera importanza del tag <hgroup> è che maschera l'outline dell'elemento padre che lo contiene; infatti, l'algoritmo dell'outliner riconosce come un titolo solamente l'heading con il valore più alto e considera tutti gli altri elementi sottotitoli.

Esempio:

<article datetime="2010-11-22" pubdate >
    <header>
       <hgroup>
          <h2>Le prospettive per il futuro del web</h2>
          <h1>L'HTML 5 rivoluzionerà il mondo del web</h1>
       </hgroup>
    </header>
    <p>Presto il web sarà pieno di siti e applicazioni che saranno in grado di mettere in crisi le più grandi case di desktop application...</p>
    <footer>
	<p>Pinco pallino</p>
    </footer>
</article>

Se facessimo l'outline della pagina HTML contenente questo <article> ci restituirebbe come titolo della sezione solamente l'<h1> contenuto nell'<hgroup> (non considerando l'<h2> anche se posto prima nel codice) poiché è il tag con il valore più alto all'interno della sezione. Senza l'elemento <hgroup> i due titoli verrebbero considerati entrambi sullo stesso livello d'importanza come titoli dell' <article>.

Nella prossima lezione parleremo del tag <mark> e della sua utilità nell'evidenziare parti particolarmente importanti del testo.

Tabella del supporto sui browser

Nuovi tag semantici e strutturali
<hgroup>	9.0+	3.0+	3.1+	5.0+	10.0+