Tutorial HTML <nav>
HTML nav Tag - belajar html nav. Element
nav digunakan sebagai navigasi atau arah berupa teks link, baik itu link keluar dari halaman yang ada ataupun berupa link dihalaman yang ada, intinya sebagai penunjuk arah atau navigasi. Contoh yang biasa digunakan adalah navigasi menu, next dan previous artikel dan Tombol navigasi page berupa nomor atau angka.
Html nav dalam peletakannya bisa diletakkan di mana saja asal masih di dalam element
<body>, walaupun demikian tidak dianjurkan element nav berada didalam element <footer>, karena hal tersebut dinilai tidak tepat dalam pembacaan browser, walaupun hal tersebut masih dibaca dengan baik oleh sebuah browser.Html nav juga tidak dianjurkan dan tidak tepat penggunaannya, jika didalam element
<nav> terdapat element <main>, karena element <main> adalah element yang diutamakan dalam sebuah konten / artikel.Contoh HTML <nav>
<nav class="demo">
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</nav>
Contoh 2 HTML <nav>
<header class="header">
<nav class="demo">
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</nav>
<div class="container-title">
<h1>Nama blog atau logo</h1>
<p>deskripsi blog</p>
</div>
</header>
Contoh 3 HTML <nav>
<div id="wrapper">
<header class="header">
<nav class="demo">
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</nav>
<div class="container-title">
<h1>Nama blog atau logo</h1>
<p>deskripsi blog</p>
</div>
</header>
<article>
<h2>Judul artikel</h2>
<p>Lorem ipsum dolor sit amet...</p>
</article>
<article>
<h2>Judul artikel</h2>
<p>Lorem ipsum dolor sit amet...</p>
</article>
<article>
<h2>Judul artikel</h2>
<p>Lorem ipsum dolor sit amet...</p>
</article>
<nav class="pagination">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</nav>
<footer>example.com</footer>
</div>
Global Attributes:
Element
<nav> mencakup Global Attributes HTML.
Event Attributes:
Element
<nav> mencakup Event Attributes HTML.
Browser Support :
Desktop
| Chrome | 5 |
|---|---|
| Safari | 4.1 |
| Firefox | 4 |
| Opera | 11.1 |
| IE | 9 |
| Edge | Ya |
Mobile
| Android Webview | Ya |
|---|---|
| Chrome Android | Ya |
| Edge Mobile | Ya |
| Firefox Android | 4 |
| Opera Android | 11 |
| iOs Safari | 4.2 |
| Samsung Internet | Ya |
Default CSS :
Browser yang support dengan element
<nav>, mempunyai nilai default :nav {
display: block
}
Posting Komentar