Labkom99.com – Elemen navavigasi HTML5 adalah markup semantik untuk navigasi halaman. Sebuah halaman dapat berisi beberapa navigasi dengan elemen nav. Ini bisa berupa bilah navigasi di bagian header situs web, atau dapat digunakan sebagai bilah sisi untuk menautkan ke paragraf yang sesuai dari halaman.
Misalnya, kode contoh berikut memiliki dua elemen nav, satu adalah bilah navigasi di bagian header halaman, dan yang lainnya adalah sidebar halaman:
<html>
<body>
<header>
Logo etc.
<nav>
<a href="page1.html">Page 1</a>
<a href="page2.html">Page 2</a>
<a href="page3.html">Page 3</a>
</nav>
</header>
<nav>
<a href="subpage1.html">SubPage 1</a>
<a href="subpage2.html">SubPage 2</a>
<a href="subpage3.html">SubPage 3</a>
</nav>
<article> ...</article>
<footer>...</footer>
</body>
</html> Baca juga : Belajar HTML5 Elemen Header Dan Footer HTML5
Gambar berikut adalah diagram skema dari kode di atas:
Diagram skematis elemen nav dari tata letak template halaman html5
Baca juga : Belajar HTML5 Elemen Semantik HTML5
Bilah navigasi tidak harus ditempatkan di dalam elemen header, dapat ditempatkan langsung di luar elemen header.
<html>
<body>
<header>
Logo etc.
</header>
<nav>
<a href="page1.html">Page 1</a>
<a href="page2.html">Page 2</a>
<a href="page3.html">Page 3</a>
</nav>
<nav>
<a href="subpage1.html">SubPage 1</a>
<a href="subpage2.html">SubPage 2</a>
<a href="subpage3.html">SubPage 3</a>
</nav>
<article> ...</article>
<footer>...</footer>
</body>
</html> Gambar berikut adalah diagram skema dari kode di atas:
Diagram skematis elemen navigasi navigasi dari tata letak template halaman html5
Demikian pula, elemen nav hanyalah elemen navigasi semantik HTML5, dan tidak menggunakan style apa pun. Anda dapat menambahkan Style Anda sendiri ke dalamnya melalui CSS.
Baca juga : Belajar HTML5 Web Workers HTML5
Dan Anda perlu menambahkan elemen nav semantik ke halaman web. Elemen semantik ini mudah dibaca oleh browser dan mesin pencari.
Navigasi dan Aksesibilitas ( nav dan Aksesibilitas )
Pola desain yang mungkin Anda lihat diterapkan di banyak situs adalah tautan “lewati navigasi”. Idenya adalah untuk memungkinkan pengguna pembaca layar dengan cepat melewati navigasi utama situs Anda jika mereka sudah mendengarnya — lagipula, tidak ada gunanya mendengarkan seluruh menu navigasi situs besar setiap kali Anda mengeklik ke halaman baru!
Salah satu pola desain yang mungkin pernah Anda lihat di banyak situs adalah tautan “lewati navigasi”. Tujuannya adalah untuk memungkinkan pengguna pembaca layar dengan cepat melewati fitur navigasi utama situs ketika mereka sudah pernah mendengarnya. Lagi pula, tidak perlu mendengarkan seluruh menu navigasi situs besar setiap kali Anda mengklik halaman baru!
Nav elemen memiliki potensi untuk menghilangkan kebutuhan ini. Jika pembaca layar melihat sebuah navelemen, itu dapat memungkinkan penggunanya untuk melewati navigasi tanpa membutuhkan tautan tambahan. Spesifikasi menyatakan: Agen pengguna (seperti pembaca layar) yang ditargetkan untuk pengguna yang dapat memanfaatkan informasi navigasi yang dihilangkan dalam perenderan awal. Atau yang dapat memanfaatkan informasi navigasi yang segera tersedia dapat menggunakan elemen ini sebagai cara untuk menentukan konten apa pada halaman yang awalnya dilewati dan / atau disediakan berdasarkan permintaan.
nav Elemen berpotensi menghilangkan kebutuhan ini; jika pembaca layar melihat navelemen tersebut, pengguna dapat melewati navigasi tanpa link tambahan. Spesifikasi menyatakan bahwa agen pengguna (seperti pembaca layar) untuk pengguna yang dapat memanfaatkan informasi navigasi yang dihilangkan dari perenderan awal atau dapat memanfaatkan ketersediaan langsung informasi navigasi dapat menggunakan elemen ini untuk menentukan konten mana pada halaman yang pada awalnya akan dilewati dan / Atau atas permintaan.
Pembaca layar saat ini gagal mengenali nav, tetapi ini tidak berarti Anda tidak boleh menggunakannya. Teknologi pendukung akan terus berkembang dan kemungkinan besar laman Anda akan ada di Web dengan baik di masa mendatang. Dengan mengembangkan standar sekarang, Anda memastikan bahwa seiring dengan peningkatan pembaca layar, halaman Anda akan menjadi lebih mudah diakses dari waktu ke waktu.
Pembaca layar saat ini tidak dapat mengenalinya nav, tetapi itu tidak berarti Anda tidak boleh menggunakannya. Teknologi pendukung akan terus berkembang, dan kemungkinan besar halaman Anda akan digunakan secara luas di Web di masa mendatang. Dengan membangun standar sekarang, Anda dapat memastikan bahwa seiring dengan peningkatan pembaca layar, halaman Anda akan menjadi lebih mudah diakses dari waktu ke waktu.
