Hgroup Element

    Salah satu elemen baru yang didefinisikan dalam HTML 5 adalah <hgroup>, digunakan untuk mengelompokkan judul dengan sub judul yang terkait. 
    Tapi kenapa kita perlu <hgroup> ketika kita sudah punya <header> elemen? Pada artikel ini, saya mencoba menjelaskannya.

    Apakan <hgroup> elemen itu?

Elemen hgroup biasanya digunakan untuk mengelompokkan satu set dari satu atau lebih h1-h6 elemen - ke dalam suatu grup, misalnya bagian judul dan subtitle yang menyertainya.

   Jadi apa artinya?
<hgroup> bertindak sebagai penyatu untuk satu atau lebih elemen heading yang terkait yang kemungkinan terkandung dalam <header> elemen. Hal ini hanya dapat berisi sekelompok <h1> - <h6> elemen, dan harus digunakan untuk sub judul, judul alternatif, dan garis tag.

    Cara termudah untuk menunjukkan penggunaan yang tepat dari<hgroup> adalah melalui beberapa contoh.

1. Sebuah artikel dengan satu judul

Judul terdiri dari satu <h1>, sehingga <hgroup> atau <header> tidak diperlukan:
<article>
<h1> HTML </h1>
<p> Mari belajar HTML. </p>
</article>


2. Sebuah artikel dengan judul dan metadata

Di sini kita menggunakan <header> untuk mengelompokkan judul dan metadata yang terkait, sehingga suatu <hgroup> tidak diperlukan:
<Article>
<header>
<h1> HTML </h1>
<p> <time datetime = "2010/03/20" > 20 Maret 2010</time> </p>
</header>
<p> Mari belajar HTML bersama.</p>
</article>

3. Sebuah artikel dengan judul dan subjudul

Sebuah <hgroup> berisi judul dan subjudul dari artikel:

<Article>
<hgroup>
<h1> HTML </h1>
<h2> HTML Formatting </ h2>
</hgroup>
<p> Mari belajar HTML bersama.</p>
</article>

4. Sebuah artikel dengan judul, subjudul dan metadata

Sebuah <hgroup> berisi judul dan subjudul artikel, dan kemudian<header> berisi metadata dan <hgroup> :

<article>
<header>
<hgroup>
<h1> HTML </h1>
<h2> HTML Formatting </h2>
</hgroup>
<p> <time datetime = "2010/03/20" > 20 Maret , 2010 </waktu> </p> 

</header>
<p> Mari belajar HTML bersama. </p>
</article>

CONTOH REAL

Pada website MiniApps, ia menggunakan <hgroup> untuk menyertakan tag line setelah judul utama "MiniApps".

Kenapa menggunakan <hgroup> ?

Semua ini berkaitan dengan outline dari dokumen. Ketika mengelompokkan heading-heading dalam elemen <hgroup>, algoritma outline akan menutupi/meng-cover semua kecuali heading yang tertinggi dalam grup dari garis besar dokumen yang dihasilkan.

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

<hgroup> di atas berisi baik <h1> dan <h2> elemen, tetapi outliner hanya mencakup <h1>.

Diilustrasikan seperti gambar di bawah.

Outline dokumen dari miniapps.co.uk

Ringkasan

Bagaimana menggunakan <hgroup> dengan efektif.

- Jika hanya terdapat judul sederhana dengan sebuah elemen heading (<h1>  - <h6>), 

   maka tidak diperluklan sebuah <hgroup>.

-  Jika terdapat sebuah judul beserta sub-judul, atau tag-line (yaitu, lebih dari satu <h1>  - <h6> 

    berturut - turut) kelompokkan judul dan sub-judul atau tag-line tersebut kedalam sebuah <hgroup>.

-  Jika terdapat judul dengan subtitle dan metadata lain yang terkait dengan artikel, tempatkan <hgroup> 

   dan metadata lain kedalam satu elemen <header>