Pinned

Home / html / Menampilkan Menu Navigasi Menggunakan Tag Nav HTML

Menampilkan Menu Navigasi Menggunakan Tag Nav HTML

5/29/2021 10:57:00 AM
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 Tag Nav

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
Contoh Tag Nav

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.

5 komentar:

  1. AnonimJumat, 28 Mei 2021 pukul 08.38.00 WIB

    Apa yang dimaksud dengan tag nav pada html?

    BalasHapus
    Balasan
    1. AnonimJumat, 28 Mei 2021 pukul 08.38.00 WIB

      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. AnonimJumat, 28 Mei 2021 pukul 08.40.00 WIB

      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. AnonimJumat, 28 Mei 2021 pukul 08.42.00 WIB

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

    BalasHapus
    Balasan
    1. AnonimJumat, 28 Mei 2021 pukul 08.42.00 WIB

      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 -

Langganan: Posting Komentar ( Atom )