Menampilkan Menu Navigasi Menggunakan Tag Nav HTML
Tag <nav> digunakan untuk mendeklarasikan naviasi section pada dokumen HTML. Setiap website biasanya memiliki dedicated section untuk alamat navigasi, yang memungkin user untuk melakukan navigasi ke situs tersebut. Pada tag ini penggunaan link akan berada di dalam tag nav. Dengan kata lain, elemen nav merepresentasikan section dari laman yang tujuannya untuk menyediakan link navigasi, baik itu pada dokumen saat ini ataupun pada dokumen lainnya.
Sintak:
<nav> Links... </nav>
Sebelum mempelajari materi tentang cara Menampilkan Menu Navigasi Menggunakan Tag Nav HTML, terlebih dahulu pelajari materi tentang: Tanda Kurung pada HTML5 dan Fungsi Tag RP, Tag Mark HTML5 dan Fungsinya, dan Tag Meter HTML dan Fungsinya.
Tag <nav> merupakan elemen HTML yang memiliki peran penting dalam menandai bagian dari sebuah dokumen yang berfungsi sebagai navigasi, seperti menu utama, menu navigasi, atau daftar tautan ke bagian-bagian utama suatu situs web. Tag ini memainkan peran kunci dalam membangun struktur dan mempermudah navigasi bagi pengguna. Mari telusuri penggunaan, manfaat, dan fitur utama dari Tag <nav> HTML.
Link pada elemen nav mungkin menuju ke laman lainnya atau pada section berbeda dari laman yang sama. Elemen nav merupakan elemen semantik. Contoh umum dari elemen nav adalah menu, tabel, konten, dan indeks.
<nav> Links... </nav>
Penggunaan Dasar Tag <nav>
Tag <nav> digunakan untuk menandai area navigasi utama dalam sebuah halaman web.
Contoh: Penggunaan dasar tag Nav HTML adalah sebagai berikut.
<!DOCTYPE html>
<html>
<body>
<nav>
<ul>
<li>
<a href="/">
Beranda
</a>
</li>
<li>
<a href="/tentang">
Tentang
</a>
</li>
<li>
<a href="/layanan">
Layanan
</a>
</li>
<li>
<a href="/kontak">
Kontak
</a>
</li>
</ul>
</nav>
</body>
</html>
Penjelasan: Elemen-elemen seperti daftar tautan (<ul> dan <li>) digunakan di dalam Tag <nav> untuk menyusun dan menampilkan tautan navigasi.
Baca Juga:
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
tag nav
</title>
<style>
.mkn
{
font-size:40px;
color:#090;
font-weight:bold;
text-align:center;}
.nav_tag
{
text-align:center;
margin:30px 0;}
</style>
</head>
<body>
<div
class = "mkn">
Portal Wombat
</div>
<div
class = "nav_tag">
Contoh Tag Nav
</div>
<nav>
<a href = "#">Home</a> |
<a href = "#">Interview</a> |
<a href = "#">Languages</a> |
<a href = "#">Data Structure</a> |
<a href = "#">Algorithm</a>
</nav>
</body>
</html>
Output:
Portal Wombat
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
tag nav
</title>
<style>
nav
{
border:1px;
background-color:#090;
color:white;
padding:6px;}
a
{
text-decoration:none;
color:white;
font-size:20px;}
.mkn
{
font-size:40px;
color:#090;
font-weight:bold;
text-align:center;}
.nav_tag
{
text-align:center;
margin:30px 0;}
</style>
</head>
<body>
<div
class = "mkn">
Portal Wombat
</div>
<div
class = "nav_tag">
Contoh Tag Nav
</div>
<nav>
<a href ="https://www.penelitian.id/">
Home
</a> |
<a href ="https://www.penelitian.id/">
BKTIK
</a> |
<a href ="https://www.penelitian.id/">
Metopen
</a> |
<a href ="https://www.penelitian.id/">
ASN
</a> |
<a href ="https://www.penelitian.id/">
Logo
</a>
</nav>
</body>
</html>
Output:
Portal Wombat
Penggunaan dari Tag Nav
Tag nav menyediakan area navigasi primer, seperti menu utama antar laman utama atau section. Sebuah dokumen mungkin memiliki beberapa elemen nav. Contoh, satu navigasi dan satu untuk intra navigasi laman pada tag nav. Link antar tag nav dapat diprogram dengan list ul atau kode sederhana sebagai link terpisah tanpa menggunakan elemen ul. Elemen nav membuat proses pembuatan navigasi menu menjadi lebih mudah, menciptakan menu horizontal yang rapi dari link teks, dan membantu layar membaca screen secara tepat untuk mengidentifikasi area navigasi primer pada dokumen.
Manfaat tag <nav> HTML:
- Semantik yang Jelas: Tag <nav> membantu dalam memberikan struktur semantik yang jelas terhadap bagian navigasi pada suatu halaman web. Hal ini membantu mesin pencari dan teknologi pembaca layar untuk memahami dan menafsirkan informasi dengan lebih baik.
- Aksesibilitas: Penggunaan yang tepat dari Tag <nav> memperbaiki aksesibilitas, karena membantu pembaca layar dan perangkat bantu lainnya untuk memahami bagian mana yang merupakan bagian navigasi utama.
- SEO yang Lebih Baik: Menandai navigasi dengan Tag <nav> dapat mempengaruhi SEO (Search Engine Optimization), karena mesin pencari dapat memahami struktur halaman web dengan lebih baik, memperhitungkan bagian navigasi saat mengindeks.
- Memudahkan Pengguna: Penyusunan yang jelas dari tautan navigasi di dalam Tag <nav> mempermudah pengguna dalam menemukan informasi yang diinginkan dengan lebih cepat.
Konteks Penggunaan yang Tepat
Tag <nav> sebaiknya digunakan hanya untuk bagian navigasi utama. Menggunakan tag ini secara sembarangan untuk bagian yang bukan navigasi utama dapat mengurangi nilai semantik dan mengganggu interpretasi halaman web oleh mesin pencari atau teknologi bantu.
Kesimpulan
Tag <nav> adalah elemen HTML yang penting dalam menandai dan menyusun bagian navigasi pada sebuah halaman web. Dengan memberikan semantik yang jelas, meningkatkan aksesibilitas, memperbaiki SEO, dan memudahkan pengguna, penggunaan yang tepat dari Tag <nav> membantu membangun struktur halaman web yang baik dan memastikan pengalaman navigasi yang lebih baik bagi pengguna. Ini adalah elemen yang sangat berguna untuk memperkuat struktur dan navigasi situs web secara efektif.
Keunggulan Tambahan Tag <nav> HTML dalam Struktur Navigasi Web
Dalam dunia pengembangan web, Tag <nav> merupakan elemen HTML yang memberikan keunggulan dalam mengorganisir dan menandai bagian navigasi utama pada sebuah halaman web. Tag ini memiliki sejumlah keunggulan yang berperan penting dalam meningkatkan struktur navigasi. Berikut adalah beberapa keunggulan Tag <nav> HTML:
- Semantik yang Jelas: Penggunaan Tag <nav> memberikan semantik yang jelas terhadap bagian navigasi utama dalam halaman web. Ini membantu mesin pencari memahami struktur halaman dengan lebih baik, meningkatkan indeksabilitas konten, dan memberikan nilai SEO yang lebih baik.
- Aksesibilitas yang Ditingkatkan: Dengan menandai bagian navigasi utama menggunakan Tag <nav>, halaman web menjadi lebih mudah diakses oleh teknologi pembantu, seperti pembaca layar. Ini memungkinkan pengalaman pengguna yang lebih baik bagi yang bergantung pada bantuan teknologi tersebut.
- Mempermudah Navigasi Pengguna: Penyusunan tautan navigasi utama di dalam Tag <nav> membantu pengguna dalam menavigasi situs web dengan lebih efisien. Pengguna dapat dengan mudah menemukan dan mengakses halaman yang diinginkan, meningkatkan pengalaman pengguna secara keseluruhan.
- Dukungan SEO yang Lebih Baik: Penggunaan Tag <nav> memberikan sinyal yang jelas kepada mesin pencari bahwa bagian tersebut adalah navigasi utama dari sebuah halaman web. Ini dapat meningkatkan kredibilitas dan rangking SEO halaman tersebut, karena mesin pencari dapat lebih baik memahami struktur situs.
- Pemeliharaan yang Lebih Mudah: Dengan menggunakan Tag <nav>, pengembang dapat dengan lebih mudah memelihara dan memperbarui bagian navigasi pada situs web. Struktur yang terorganisir secara baik membuat perubahan atau penambahan tautan navigasi menjadi lebih sistematis.
- Mendukung Pengembangan Responsif: Dalam pengembangan responsif, Tag <nav> membantu dalam menandai bagian-bagian navigasi yang relevan, memungkinkan pengembang untuk merancang pengalaman navigasi yang responsif dan adaptif untuk perangkat-perangkat berbeda.
- Pentingnya untuk Pengalaman Pengguna yang Baik: Struktur navigasi yang baik dan jelas adalah salah satu komponen utama dalam meningkatkan pengalaman pengguna. Tag <nav> membantu menciptakan lingkungan yang teratur dan terarah bagi pengguna, memungkinkan untuk menemukan informasi dengan cepat dan mudah.
Catatan: Tag <nav> HTML adalah elemen penting dalam menandai dan mengorganisir navigasi utama dalam sebuah halaman web. Dengan memberikan semantik yang jelas, meningkatkan aksesibilitas, mendukung SEO, dan memudahkan navigasi pengguna, penggunaan Tag <nav> memberikan manfaat besar dalam meningkatkan struktur dan pengalaman pengguna pada situs web. Hal ini membuatnya menjadi bagian krusial dalam pengembangan web yang harus diperhatikan oleh para pengembang untuk meningkatkan kualitas situs web.
Referensi Tambahan:
Artikel ini didedikasikan kepada: Rafi Taufan Setiaji, Raras Indah Aningtyas, Salsabila Noviana, Shinta Nur Sabila, dan Sofian Panuntun.
5 komentar untuk "Menampilkan Menu Navigasi Menggunakan Tag Nav HTML"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -
Apa yang dimaksud dengan tag nav pada html?
BalasHapusElement < nav > pada HTML mewakili bagian dari halaman yang tujuannya adalah menyediakan link navigasi, baik dalam dokumen itu sendiri ataupun ke dokumen lain. Contoh umum bagian navigasi adalah menu, daftar isi, dan indeks.
HapusContoh umum elemen navigasi adalah menu, tabel, konten, dan indeks. Tag navigasi disediakan untuk area navigasi utama, seperti menu utama pada bagian atas halaman atau bagian lainnya. Dokumen mungkin memiliki beberapa elemen navigasi sendiri, seperti navigasi situs dan lainnya.
HapusApakah tag nav harus digunakan pada sebua dokumen yang terdapat dalam halaman html?
BalasHapusTidak,
HapusPengembang hanya diperbolehkan menggunakan tag navigasi untuk blok tautan navigasi yang dominan, bukan semua tautan dalam situs website. Hal ini adalah bentuk opsi yang bagus ketika user perlu menyertakan daftar tautan yang tidak diurutkan ataupun yang diurutkan. Namun, jika pengembang ingin menambahkan tautan ke elemen < footer >, maka pengembang tidak perlu menyertakan tag < nav >.