HTML nav tag | belajar <nav> element
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).
<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.
<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.
<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.
<!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 ©
<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