HTML Dasar #6 : Belajar Tag Header dan Nav

Sebelumnya, kita telah membahas tentang tag title pada HTML yang berfungsi untuk menampilkan judul halaman pada browser. Sekarang, kita akan membahas tentang tag header dan tag nav pada HTML.

Gambar 6.1 : Ilustrasi Belajar Tag Header dan Nav

Tag header dan tag nav merupakan bagian dari struktur HTML yang sangat penting, dan digunakan untuk membangun tampilan dan navigasi dari halaman web. Berikut ini adalah penjelasan lengkap tentang kedua tag tersebut beserta tutorialnya.

Daftar Isi

Tag Header

Tag header pada HTML digunakan untuk menunjukkan bagian atas dari sebuah halaman web. Bagian ini biasanya berisi elemen-elemen seperti judul, logo, deskripsi singkat, dan elemen-elemen lain yang menunjukkan identitas dan tujuan dari situs web tersebut.

Contoh penggunaan tag header pada HTML:

<header>
  <h1>Ini adalah judul situs web</h1>
  <p>Ini adalah deskripsi singkat tentang situs web</p>
  <img src="logo.png" alt="Logo situs web">
</header>

Pada contoh di atas, tag header diapit oleh tag pembuka <header> dan tag penutup </header>. Di dalam tag header terdapat elemen h1 yang berisi judul situs web, elemen p yang berisi deskripsi singkat tentang situs web, dan elemen img yang menampilkan logo situs web.

Tag Nav

Tag nav pada HTML digunakan untuk menunjukkan navigasi utama pada sebuah halaman web. Tag nav dapat digunakan untuk mengelompokkan tautan menuju halaman-halaman penting pada situs web, seperti halaman utama, tentang kami, produk, dan kontak

Contoh penggunaan tag nav pada HTML:

<nav>
  <ul>
    <li><a href="#">Beranda</a></li>
    <li><a href="#">Tentang Kami</a></li>
    <li><a href="#">Produk</a></li>
    <li><a href="#">Kontak</a></li>
  </ul>
</nav>

Pada contoh di atas, tag nav diapit oleh tag pembuka <nav> dan tag penutup </nav>. Di dalam tag nav terdapat elemen ul yang berisi daftar tautan menuju halaman-halaman penting pada situs web. Setiap tautan diwakili oleh elemen li, dan di dalam elemen li terdapat elemen a yang menghubungkan tautan tersebut ke halaman web yang sesuai.

Tutorial Penggunaan Tag Header dan Tag Nav pada HTML

Untuk membuat tag header dan nav pada HTML, langkah-langkah yang dapat diikuti adalah sebagai berikut:

Buat sebuah file HTML baru pada text editor atau aplikasi pengembangan web yang digunakan. (Tutorial Membuat File Dokumen HTML)
Ketikkan kode berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Header pada HTML</title>
</head>
<body>
    <header>
        <h1>Ini adalah judul situs web</h1>
        <p>Ini adalah deskripsi singkat tentang situs web</p>
        <img src="logo.png" alt="Logo situs web">
      <nav>
        <ul>
            <li><a href="#">Beranda</a></li>
            <li><a href="#">Tentang Kami</a></li>
            <li><a href="#">Produk</a></li>
            <li><a href="#">Kontak</a></li>
        </ul>
      </nav>
    </header>
    <main>
        <p>Ini adalah konten utama dari situs web</p>
    </main>
</body>
</html>

Pada contoh di atas, tag nav di letakkan didalam tag header. Hal ini karena tag header digunakan untuk menunjukkan bagian atas dari sebuah halaman web, sementara tag nav digunakan untuk menunjukkan menu navigasi utama pada halaman web tersebut.Penggunaan tag header dan tag nav secara bersamaan dapat membuat halaman web terlihat lebih informatif dan mudah dinavigasi oleh pengguna.

Simpan file dengan nama "headernav.html".
Buka file "headernav.html" dengan web browser.

Kesimpulan

Tag header dan tag nav merupakan bagian penting dalam pembuatan halaman web. Tag header digunakan untuk menampilkan elemen-elemen penting di bagian atas halaman web, seperti judul, deskripsi singkat, dan logo. Sementara itu, tag nav digunakan untuk menampilkan menu navigasi utama pada halaman web. Dengan menggunakan tag header dan tag nav, pengguna dapat dengan mudah mengenali identitas dan navigasi pada halaman web yang dibuat

Dalam artikel ini, kita telah membahas secara lengkap tentang tag header dan tag nav pada HTML. Tag ini dapat digunakan untuk meningkatkan pengalaman pengguna dalam mengakses halaman web. Dengan memahami penggunaan dan fungsinya, Anda dapat membuat halaman web yang lebih informatif dan mudah diakses oleh pengguna. Teruslah belajar dan berlatih untuk mengembangkan keterampilan pengkodean HTML Anda!