Uncategorized

Membuat Header pada HTML5

Penggunaan elemen struktural <header></header> yaitu untuk membuat kepala (header) dokumen atau sesi. Header dapat berupa <h1> sampai <h6>, meskipun sangat disarankan dengan menggunakan elemen <hgroup><hgroup>. Kita dapat menggunakan elemen ini untuk menempatkan logo dan tabel daftar isi. Berikut ini merupakan contoh penggunaan elemen header :

<!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>
<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.

Elemen <hr> pada kode di atas digunakan untuk menampilkan pembatas berupa garis horizontal. Kita dapat menggunakan elemen struktural <header></header> sebagai judul elemen struktural yang lain pada sebuah dokumen. Akan tetapi, kita tidak dapat menggunakan elemen <header></header> ini yang didalamnya berisi elemen <footer>, <address>, dan elemen <header> yang lain. Jika hal tersebut dilakukan, maka akan menghasilkan rendering kode HTML yang tidak sesuai.