Pinned

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.

2 Contoh Utama Penggunaan Tag Nav pada HTML5
Tag Nav HTML5

Sebelum memahami lebih dalam materi tentang Menampilkan Menu Navigasi Menggunakan Tag Nav HTML, terlebih dahulu pelajari materi tentang: Tag Meter HTML dan Fungsinya [klik], Tag Mark HTML5 dan Fungsinya [klik], dan Tanda Kurung pada HTML5 dan Fungsinya Tag RP [klik].

 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.

Sintak:
<nav> Links... </nav>

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;}

 

{

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 navLink 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.

5 komentar:

  1. Apa yang dimaksud dengan tag nav pada html?

    BalasHapus
    Balasan
    1. Element < 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.

      Hapus
    2. Contoh 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.

      Hapus
  2. Apakah tag nav harus digunakan pada sebua dokumen yang terdapat dalam halaman html?

    BalasHapus
    Balasan
    1. Tidak,

      Pengembang 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 >.

      Hapus

Hubungi admin melalui Wa : +62-896-2514-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 -