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>

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.

Komentar
Unlimited Hosting WordPress Developer Persona

You can subscribe to my newsletter to get updates (no spam).

powered by TinyLetter