tRikSonic
Tema
/ / HTML nav Tag

HTML nav Tag

Terakhir diperbarui : 7 September 2018 - 07.47
/ / HTML nav Tag

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.
background html
Table of contents
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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

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

</body>
</html>
nav.demo {
    background: #353535;
    margin-bottom: 10px;
    overflow: hidden;
    clear: both;
}

nav.demo ul {
    padding: 0;
    list-style: none;
    list-style-type: none;
    margin: 0;
}

nav.demo a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #9c9c9c;
}

nav.demo a.active {
    background: #171717;
    color: white;
}

nav.demo a:hover {
    background: #9c1a1a;
    color: white;
}

/*responsive li pada screen 648px*/
@media screen and (min-width: 648px) {
 nav.demo li {
  display: inline-block;
  float: left;
 }
}
//javascript

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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

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

</body>
</html>
/*nav*/
nav.demo {
    background: #353535;
    margin-bottom: 10px;
    overflow: hidden;
    clear: both;
}

nav.demo ul {
    padding: 0;
    list-style: none;
    list-style-type: none;
    margin: 0;
}

nav.demo a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #9c9c9c;
}

nav.demo a.active {
    background: #171717;
    color: white;
}

nav.demo a:hover {
    background: #9c1a1a;
    color: white;
}

/*responsive nav li pada screen 648px*/
@media screen and (min-width: 648px) {
 nav.demo li {
  display: inline-block;
  float: left;
 }
}

/*title blog*/
.header {
    background: #dedede;
}

.container-title {
    text-align: center;
    padding: 20px 0;
}

.container-title h1 {
 margin: 0px;
}

.container-title p {
 margin: 5px 0px;
}
//javascript

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>
<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>
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    background-color: #7d7d7d;
    overflow-x: hidden;
    margin: 0;
}

/*main*/
#wrapper {
    max-width: 900px;
    margin: 0 auto;
    background-color: #fff;
}

/*nav atas*/
nav.demo {
    background: #353535;
    margin-bottom: 10px;
    overflow: hidden;
    clear: both;
}

nav.demo ul {
    padding: 0;
    list-style: none;
    list-style-type: none;
    margin: 0;
}

nav.demo a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #9c9c9c;
}

nav.demo a.active {
    background: #171717;
    color: white;
}

nav.demo a:hover {
    background: #9c1a1a;
    color: white;
}

/*responsive nav li pada screen 648px*/
@media screen and (min-width: 648px) {
 nav.demo li {
  display: inline-block;
  float: left;
 }
}

/*title blog*/
.header {
    background: #dedede;
}

.container-title {
    text-align: center;
    padding: 20px 0;
}

.container-title h1 {
 margin: 0px;
}

.container-title p {
 margin: 5px 0px;
}

/*article*/
article {
    padding: 10px;
    margin: 15px 10px;
    border: 1px solid #afacac;
    border-radius: 5px;
}

article h2 {
    margin-top: 0;
    margin-bottom: 10px;
}

article p {
    margin-top: 0;
    margin-bottom: 10px;
}

/*pagination*/
nav.pagination {
    padding: 10px;
}

nav.pagination a {
    font-size: 18px;
    text-decoration: none;
    padding: 5px 10px;
    color: red;
    margin-right: 3px;
    border: 1px solid #b5b5b5;
    border-radius: 5px;
}

/*footer*/
footer {
    padding: 15px 0;
    background: #171717;
    text-align: center;
    color: honeydew;
    margin-top: 15px;
}
//javascript

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
}

Tidak ada komentar

Comment Form

Posting Komentar

  1. Untuk menyisipkan sebuah link atau tautan gunakan <i rel="link=//example.com">teks disini</i>
    • Tanpa menggunakan https: dan http:
  2. Untuk menyisipkan sebuah kode yang pendek gunakan <i rel="code">kode disini</i>
  3. Untuk menyisipkan sebuah kode yang panjang gunakan <i rel="pre">kode disini</i>
  4. Untuk menyisipkan sebuah teks Tebal gunakan <strong>teks tebal disini</strong>
  5. Untuk menyisipkan sebuah teks Miring gunakan <em>teks miring disini</em>
  6. Untuk menyisipkan sebuah gambar gunakan <i rel="image">url gambar disini</i>

Ketentuan Komentar

  • Pengguna yang dapat berkomentar adalah pengguna yang memiliki akun google
  • Guna mengurangi komentar yang bersifat spam, maka akan diberlakukan langkah verifikasi kata.
  • Pengguna bertanggung jawab atas komentar yang dikirim
  • Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim
  • Dengan mengirimkan sebuah komentar, maka pengguna dianggap menyetujui semua ketentuan diatas

Poin ketentuan diatas tidak bersifat tetap, dan dapat berubah kapan saja

Konversi Kode
Kode yang ingin dikonversi

 
Loading.....
Postingan Lebih BaruBerandaPostingan Lama
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.