Deskripsi
Penjelasan HTML nav

HTML <nav> element merepresentasikan link navigasi (navigational link).

Link-link yang merujuk ke halaman lain atau halaman web itu sendiri, dapat dikelompokkan (digabungkan) di dalam element <nav>. Akan tetapi, tidak semua link dapat ditulis (digabungkan) dalam element <nav>, seperti beberapa link yang ditulis didalam <footer> element, tidak tepat bila digabungkan dalam <nav> element.

Link yang ditulis di dalam <nav> element, biasanya menunjukkan navigasi menu utama sebuah halaman (web). Contohnya, dapat digunakan untuk menggabungkan beberapa link daftar isi (table of content), link yang menuju halaman sebelum dan sesudahnya (next & previous) dan penomoran halaman 1,2,3 dan seterusnya.

Dalam sebuah dokumen, dapat ditulis lebih dari satu elemen <nav>.

<nav> tidak boleh digunakan sebagai induk element <main>. Artinya, di dalam element <nav> tidak boleh ditulis (terdapat) <main> element.


Global Attributes
Atribut Secara Global (Keseluruhan)

<nav> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Event Attributes
Atribut event (Peristiwa)

<nav> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Example
Contoh HTML <nav> element

Contoh 1

Contoh <nav> dengan beberapa link dalam daftar (list).

<nav>
  <ul>
    <li><a href="blog.php">Blog</a></li>
    <li><a href="about.php">Mengenai</a></li>
    <li><a href="contact.php">Kontak</a></li>
  </ul>
</nav>
Contoh 2

Contoh <nav> yang tidak harus dalam daftar (list). Contoh ini dapat ditulis pada halaman index.

<nav>
 <h1>Selamat Datang di dul.web.id</h1>
 <p>Anda berada pada halaman utama dul.web.id. Disini, Anda dapat menemukan <a href="html.php">Referensi HTML</a>, bagi yang ingin belajar HTML. <a href="css.php">Referensi CSS</a>, bagi yang ingin belajar CSS. Anda dapat belajar secara mandiri dengan bantuan <a href="/editor/dul-editor.php">Code Editor</a> yang kami sediakan. </p>
</nav>
Contoh 3

Contoh <nav> element yang digunakan pada aplikasi email.

<p><input type=button value="Email Baru" onclick="compose()"></p>
<nav>
 <h1>Berkas</h1>
 <ul>
  <li> <a href="inbox.php" onclick="return openFolder(this.href)">Kotak Masuk</a> <span class=count></span>
  <li> <a href="sent.php" onclick="return openFolder(this.href)">Terkirim</a>
  <li> <a href="drafts.php" onclick="return openFolder(this.href)">Draft</a>
  <li> <a href="trash.php" onclick="return openFolder(this.href)">Sampah</a>
 </ul>
</nav>
Contoh 4

Contoh lengkap. Beberapa link ada yang ditulis didalam <nav>, ada juga yang tidak. Lengkap dengan microdata.

<body itemscope itemtype="http://schema.org/Blog">
 <header>
  <h1>dul.web.id</h1>
  <p><a href="/blog.php">Blog</a> -
     <a href="/shop.php">Toko Online</a> -
     <a href="/forum.php">Forums</a></p>
  <p>Update Terakhir: <span itemprop="dateModified">2015-10-05</span></p>
  <nav>
   <h1>Menu Navigasi</h1>
   <ul>
    <li><a href="artikel.php">Index Seluruh Article</a></li>
    <li><a href="html.php">Referensi Belajar HTML</a></li>
    <li><a href="css.php">Referensi Belajar CSS</a></li>
   </ul>
  </nav>
 </header>
 <main id="content">
  <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
   <header>
    <h1 itemprop="headline">Belajar Web Design</h1>
   </header>
   <div itemprop="articleBody">
    <p>Belajar Web Design Bersama dul.web.id. Belajar Mudah HTML dan CSS.</p>
    ... Penjelasan Konten Selengkapnya ...
   </div>
   <footer>
    <p>Dipublikasikan: <time itemprop="datePublished" datetime="2015-09-19">Sabtu, 19 September 2015</time>.</p>
   </footer>
  </article>
 </main>
 <footer>
  <p>Copyright &copy;
   <span itemprop="copyrightYear">2015</span>
   <span itemprop="copyrightHolder">dul.web.id</span>
  </p>
  <p><a href="/about.php">Mengenai</a> -
     <a href="/copyright.php">Hak Cipta</a> -
     <a href="/contact.php">Kontak</a></p>
 </footer>
</body>

Untuk Contoh 4, dapat dilihat hasilnya pada demo editor dibawah. Untuk melihat hasil dari contoh lainnya, dapat mencoba sendiri menggunakan demo editor atau code editor yang telah disediakan.

Contoh Lengkap
Demo dengan Source Code Editor

Demo Editor
Demo HTML <nav>
Code Editor