Uncategorized

Membuat Posting dengan Elemen Aside

Dalam HTML tradisional, kita biasa membuat sidebar menggunakan tag <div> dengan bantuan Cascading Style Sheet (CSS) untuk mengatur posisi dan ukuran sidebar tersebut. HTML5 menyediakan kemampuan yang lebih mudah untuk penggunaan umum sidebar, yaitu hadirnya elemen baru <aside></aside>. Seperti halnya elemen <section>, elemen <aside> ini lebih deskriptif untuk memberikan bagian/sesi khusus dari sebuah dokumen.

Berikut ini menunjukkan contoh kode HTML untuk membuat sidebar :

<!DOCTYPE html>
<head>
<title>Membuat Posting dengan Elemen Aside</title>
</head>
<body>
<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 springform 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.

Penempatan elemen <aside></aside> sangatlah penting. Pada contoh di atas, elemen tersebut ditempatkan sebagai bagian dari dokumen utama. Namun, apabila kita ingin membuat sidebar khusus untuk bagian tertentu, maka elemen tersebut harus ditempatkan pada bagian tersebut. Hai ini penting ketika kita menggunakan elemen <article></article>, sehingga sidebar ditampilkan sesuai dengan bagian-bagian yang berkaitan.