Referensi Belajar HTML nav tag. Tutorial dan panduan mengenai element <nav>...</nav> yang menunjukkan navigation atau link sebagai menu navigasi. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <nav>.


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

HTML
<nav>
  <ul>
    <li><a href="/p/about.html">About</a></li>
    <li><a href="/p/contact.html">Contact</a></li>
    <li><a href="/p/privacy.html">Privacy Policy</a></li>
  </ul>
</nav>
Contoh 2

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

HTML
<nav>
  <h1>Selamat Datang di apacara.com</h1>
  <p>Anda berada pada halaman utama apacara.com. Disini, Anda dapat menemukan <a href="#">Referensi HTML</a>, bagi yang ingin belajar HTML. <a href="#">Referensi CSS</a>, bagi yang ingin belajar CSS. <a href="/category/amp.html">AMP html</a> bagi yang ingin belajar AMP (Accelarated Mobile Pages). </p>
</nav>
Contoh 3

Contoh <nav> element yang digunakan pada aplikasi email.

HTML
<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 lengkap dapat Anda lihat dibawah ini. Beberapa link ada yang ditulis didalam <nav>, ada juga yang tidak. Lengkap dengan microdata.

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML nav tag</title>
    <style>

    </style>
  </head>
  <body itemscope itemtype="http://schema.org/Blog">
    <header>
    <h1>apacara.com</h1>
    <p><a href="#">Blog</a> -
       <a href="#">Chat</a> -
       <a href="#">Forums</a></p>
    <p>Update Terakhir: <span itemprop="dateModified">2017-10-05</span></p>
    <nav>
     <h1>Menu Navigasi</h1>
     <ul>
      <li><a href="/">Index Seluruh Article</a></li>
      <li><a href="#">Referensi Belajar HTML</a></li>
      <li><a href="#">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 apacara.com. Belajar Mudah HTML dan CSS.</p>
      ... Penjelasan Konten Selengkapnya ...
     </div>
     <footer>
      <p>Dipublikasikan: <time itemprop="datePublished" datetime="2017-09-19">Sabtu, 19 September 2017</time>.</p>
     </footer>
    </article>
    </main>
    <footer>
    <p>Copyright &copy;
     <span itemprop="copyrightYear">2017</span>
     <span itemprop="copyrightHolder">apacara.com</span>
    </p>
    <p><a href="/p/about.php">Mengenai</a> -
       <a href="/p/copyright.html">Hak Cipta</a> -
       <a href="/p/contact.html">Kontak</a></p>
    </footer>
  </body>
</html>