Belajar HTML5 Elemen Navigasi HTML5


Labkom99.com - Elemen nav HTML5 adalah markup semantik untuk navigasi halaman. Sebuah halaman dapat berisi beberapa navigasi dengan elemen nav. Ini bisa berupa bilah navigasi di bagian header situs web, atau dapat digunakan sebagai bilah sisi untuk menautkan ke paragraf yang sesuai dari halaman.

 

Misalnya, kode contoh berikut memiliki dua elemen nav, satu adalah bilah navigasi di bagian header halaman, dan yang lainnya adalah sidebar halaman:

<html>
<body>
  <header>
      Logo etc.
      <nav>
          <a href="page1.html">Page 1</a>
          <a href="page2.html">Page 2</a>
          <a href="page3.html">Page 3</a>
      </nav>
  </header>
 
    <nav>
        <a href="subpage1.html">SubPage 1</a>
        <a href="subpage2.html">SubPage 2</a>
        <a href="subpage3.html">SubPage 3</a>
    </nav>
     
    <article> ...</article>
     
    <footer>...</footer>
 
</body>
</html>       

Baca juga : Belajar HTML5 Elemen Header Dan Footer HTML5

Gambar berikut adalah diagram skema dari kode di atas:

 

Belajar HTML5 Elemen Navigasi HTML5

Diagram skematis elemen nav dari tata letak template halaman html5


Baca juga : Belajar HTML5 Elemen Semantik HTML5

Bilah navigasi tidak harus ditempatkan di dalam elemen header, dapat ditempatkan langsung di luar elemen header.

<html>
<body>
  <header>
      Logo etc.
  </header>
 
    <nav>
        <a href="page1.html">Page 1</a>
        <a href="page2.html">Page 2</a>
        <a href="page3.html">Page 3</a>
    </nav>
 
    <nav>
        <a href="subpage1.html">SubPage 1</a>
        <a href="subpage2.html">SubPage 2</a>
        <a href="subpage3.html">SubPage 3</a>
    </nav>
 
    <article> ...</article>
 
    <footer>...</footer>
 
</body>
</html> 

 Gambar berikut adalah diagram skema dari kode di atas:


Belajar HTML5 Elemen Navigasi HTML5

Diagram skematis elemen navigasi navigasi dari tata letak template halaman html5


Demikian pula, elemen nav hanyalah elemen navigasi semantik HTML5, dan tidak menggunakan style apa pun. Anda dapat menambahkan Style Anda sendiri ke dalamnya melalui CSS.


Baca juga : Belajar HTML5 Web Workers HTML5


Dan Anda perlu menambahkan elemen nav semantik ke halaman web. Elemen semantik ini mudah dibaca oleh browser dan mesin pencari.

Komentar