Membuat Navigasi pada Dokumen HTML5

  • 2 minute read
Membuat Navigasi pada Dokumen HTML5
Share
0 people shared the story
0
0
0
0

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
Share
Tweet
Share
Share
Related Tags

You May Also Like