Uncategorized

Membuat Navigasi pada Dokumen HTML5

Kebanyakan web mempunyai link navigasi. Link-link tersebut berupa hyperlink atau button, yang biasanya dipisahkan dari bagian dokumen dengan menggunakan elemen <div>. Akan tetapi, meskipun terpisah, itu tidak berarti secara spesifik digunakan untuk navigasi. Pada HTML5, kita dapat mengidentifikasi sesi untuk kebutuhan navigasi dalam markup.
Elemen struktural <nav></nav> dapat digunakan untuk membuat sebuah kontainer untuk menampung elemen navigasi keseluruhan dokumen HTML5 atau divisi lain dalam dokumen. Berikut contoh kode program untuk membuat elemen navigasi pada HTML5 :

<!DOCTYPE html>
<head>
<title>Membuat Navigasi pada HTML5</title>
</head>
<body>
<header>
<span style="color:red;font-style:italic;">
Baking Cheesecakes
</span>
<hr>
</header>
<nav>
<a href="/Baking/" target="_blank">Baking</a> |
<a href="/ingredients/" target="_blank">Ingredients</a> |
<a href="/mixing/" target="_blank">Mixing</a> |
<a href="/toppings/" target="_blank">Toppings</a>
</nav>
<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>
<footer> &copy; 2011 - Better Made Cheesecakes - All rights reserved </footer>
</body>
</html>

Demo dapat dilihat pada tautan ini.

Link navigasi yang ditunjukkan pada contoh di atas hanya sebagai contoh ilustrasi dan tidak berfungsi sebagaimana mestinya.
Dapat dilihat pada contoh di atas bahwa, sesi navigasi mempunyai markup sendiri berupa <nav></nav>, sehingga mudah untuk diidentifikasi. Pada contoh di atas, elemen <nav></nav> ditempatkan diantara keseluruhan dokumen, atau dapat juga ditempatkan pada subdivisi dokumen.
Kita tidak dibatasi untuk melakukan hyperlink seperti dicontohkan kode di atas. Dengan elemen kontainer <nav></nav> kita dapat menambahkan kebutuhan navigasi yang kita perlukan. Untuk diingat, bahwa kontainer <nav></nav> tidak dapat digunakan dalam elemen <footer>. Jika hal tersebut dilakukan, maka akan menghasilkan rendering HTML5 yang tidak diharapkan.