HTML nav tag | belajar <nav> element

HTML Fadlullah Fadul December 3, 2018

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.

Silahkan, lihat referensi mengenai HTML Global Attribute

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.

Silahkan, lihat referensi mengenai HTML Events Attribute

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
editor 
<!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>
SHARE
Previous Article Next Article