Uncategorized

Mengelompokkan Elemen Heading pada HTML5

Dalam beberapa kasus, mungkin kita membutuhkan pengelompokan menggunakan elemen <h1> hingga <h6> secara bersamaan. Sebagai contoh, apabila kita ingin membuat judul sesi yang menggunakan elemen <h1>. Kemudian, tepat di bawahnya, kita menempatkan subtitel (subheading) yang menggunakan elemen <h2>. Pada HTML5, kita dapat mengelompokkan elemen <h1> dan <h2> ke dalam elemen struktural baru yang disebut <hgroup>.

Contoh penggunaan elemen <hgroup></hgroup> yaitu sebagai berikut. Dalam kasus ini, elemen yang digunakan sebagai contoh yaitu elemen <h1> dan <h2>.

<!DOCTYPE html>
<head>
<title>Membuat Posting dengan Elemen Aside</title>
</head>
<body>
<header>
<span style="color:red;font-style:italic;">
Baking Cheesecakes
</span>
<hr>
</header>
<hgroup draggable="true">
<h1>Cheesecake Tips and Techniques</h1>
<h2>Professional Tips</h2>
</hgroup>
<aside style="font-size:larger;font-style:italic;color:blue;float:right;width:120px;">
To create a water bath, use a pan that will allow you to fill it with boiling water that
goes halfway up the spring form pan in which the cake is placed.
</aside>
<p>
When baking a cheesecake, it is important not to over bake it. You only want to bake it
until the middle has a slight wiggle, not until it is rock solid.
</p>
<p>It is important that you use a water bath, discussed at the right, to ensure even baking of
your cheesecake.</p>
</body>
</html>

Demo dapat dilihat pada tautan ini.

Harap diingat bahwa pada contoh di atas, elemen <hgroup> ditempatkan di bawah elemen <header></header>. Hal ini dilakukan karena elemen <h1> – <h6> tidak boleh diletakkan diantara elemen <header></header>. Kita dapat menggunakan elemen <hgroup> di bagian sesi yang lain pada dokumen HTML5.

Dalam dokumen HTML5 yang baik, elemen <hgroup</hgroup> merupakan metode yang bagus untuk mengelompokkan berbagai macam heading dan subheading. Khususnya jika kita menggunakan elemen <article></article>. Dengan demikian hubungan antara heading dan subheading akan terikat dengan baik dan mudah ditemukan dalam suatu struktur dokumen HTML.