List Sebagai Menu

Mayoritasi dari website yang kita kembangkan merupakan sebuah website yang terdiri dari banyak halaman, dan seringkali jumlah persis dari halaman web yang akan kita bangun tidak diketahui (karena bersifat dinamis). Untuk memppermudah pengguna dalam melakukan navigasi pada website kita tentunya kita harus menyediakan menu yang mudah diakses dan dilihat oleh pengguna.

Karena hal tersebut, elemen navigasi merupakan salah satu elemen yang paling penting dan hampir selalu ditemukan dalam sebuah website. Bagian ini akan menjelaskan cara pembuatan elemen navigasi dengan menggunakan list, serta elemen navigasi yang memberikan makna semantik dalam dokumen web.

Elemen Navigasi

HTML menyediakan sebuah elemen untuk menandakan bagian navigasi dari sebuah dokumen, yaitu elemen nav. Berdasarkan dokumen spesifikasi HTML5, fungsi utama dari elemen nav yaitu:

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav element is necessary for those links.

Seperti yang dapat dilihat, elemen nav digunakan hanya untuk blok navigasi utama, seperti menu keseluruhan halaman. Menu-menu lain seperti daftar isi atau daftar halaman pada bagian kaki website tidak perlu dimasukkan ke dalam sebuah nav, meskipun tentunya memasukkan elemen-elemen tersebut ke dalam sebuah nav tidaka akn memberikan kerugian apapun.

Contoh pemakaian elemen nav ialah sebagai berikut:

<nav>
    <ul id="main-menu">
        ...
    </ul>
</nav>

Elemen nav tidak akan terlihat pada hasil eksekusi dikarenakan elemen ini hanya merupakan penampung yang memiliki makna semantik, sama seperti header, footer, maupun article.

Bagikan Tulisan
comments powered by Disqus
Kembali ke bertzzie.com