Langsung ke konten utama

Iklan





HTML5 Tag Nav

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

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

tag nav

</title>

 

<style>

.gfg 

{

font-size:40px;

color:#090;

font-weight:bold;

text-align:center;}

 

.nav_tag 

{

text-align:center;

margin:30px 0;}

</style>

</head>

 

<body>

<div 

class = "gfg">

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

 

.gfg 

{

font-size:40px;

color:#090;

font-weight:bold;

text-align:center;}

 

.nav_tag 

{

text-align:center;

margin:30px 0;}

</style>

</head>

 

<body>

<div 

class = "gfg">

Portal Wombat

</div>

 

<div 

class = "nav_tag">

Contoh Tag Nav

</div>

 

<nav>

<a href ="https://www.elfanmauludi.id/">

Home

</a> |

 

<a href ="https://elfanmauludi-tik.blogspot.com/">

BKTIK

</a> |

 

<a href ="https://elfanmauludi-ptk.blogspot.com/">

Metopen

</a> |

 

<a href ="https://elfanmauludi-asn.blogspot.com/">

ASN

</a> |

 

<a href ="https://elfanmauludi-logo.blogspot.com/">

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.


Iklan

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

Posting Komentar

Respon komentar 7 x 24 jam, so please be patient :D