HTML Dasar / Semantik HTML

Header, Nav, Footer

Header, Nav, Footer 🏗️

Tiga elemen ini adalah tulang punggung struktur halaman web modern. Sebelum HTML5, semua bagian halaman dibungkus dengan <div> generik — sekarang ada tag semantik khusus yang memberi makna pada setiap bagian.

Mengapa Semantik Penting?

<!-- Cara lama — tidak semantik -->
<div id="header">...</div>
<div id="nav">...</div>
<div id="footer">...</div>

<!-- Cara modern — semantik HTML5 -->
<header>...</header>
<nav>...</nav>
<footer>...</footer>

Keduanya tampil sama persis di browser — namun versi semantik memberi manfaat nyata:

  • 🔍 SEO — mesin pencari memahami struktur halaman lebih baik
  • ♿ Aksesibilitas — screen reader bisa langsung melompat ke bagian yang diinginkan
  • 👨‍💻 Keterbacaan kode — developer lain langsung paham struktur halaman

<header> — Kepala Halaman atau Section

<header> berisi konten pengantar atau navigasi untuk halaman atau section tertentu. Biasanya berisi logo, judul, dan menu navigasi utama.

<header>
  <img src="logo.png" alt="Logo Perusahaan">
  <h1>Nama Website</h1>
  <nav>...</nav>
</header>

<header> Tidak Hanya Satu

<header> bisa digunakan lebih dari sekali dalam satu halaman — setiap <article> atau <section> bisa memiliki <header>-nya sendiri:

<!-- Header halaman utama -->
<header>
  <img src="logo.png" alt="Logo">
  <nav>...</nav>
</header>

<main>
  <article>
    <!-- Header khusus artikel -->
    <header>
      <h2>Judul Artikel</h2>
      <p>Ditulis oleh <strong>Budi Santoso</strong> — 20 April 2025</p>
    </header>
    <p>Isi artikel...</p>
  </article>
</main>

<nav> — Navigasi

<nav> digunakan untuk kumpulan link navigasi utama — menu, breadcrumb, pagination, atau daftar tautan penting lainnya.

<nav>
  <ul>
    <li><a href="/">Beranda</a></li>
    <li><a href="/tentang">Tentang</a></li>
    <li><a href="/layanan">Layanan</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/kontak">Kontak</a></li>
  </ul>
</nav>

<nav> Juga Bisa Lebih dari Satu

Halaman bisa memiliki beberapa <nav> untuk navigasi yang berbeda fungsinya:

<!-- Nav utama di header -->
<header>
  <nav aria-label="Navigasi Utama">
    <ul>
      <li><a href="/">Beranda</a></li>
      <li><a href="/produk">Produk</a></li>
      <li><a href="/kontak">Kontak</a></li>
    </ul>
  </nav>
</header>

<!-- Nav breadcrumb di tengah halaman -->
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Beranda</a></li>
    <li><a href="/blog">Blog</a></li>
    <li>Tutorial HTML Semantik</li>
  </ol>
</nav>

<!-- Nav pagination di bawah daftar artikel -->
<nav aria-label="Pagination">
  <a href="?halaman=1">1</a>
  <a href="?halaman=2">2</a>
  <a href="?halaman=3">3</a>
</nav>

Atribut aria-label membantu screen reader membedakan beberapa <nav> di halaman yang sama.

<footer> — Kaki Halaman atau Section

<footer> berisi informasi penutup — hak cipta, link tambahan, kontak, peta situs, atau informasi legal.

<footer>
  <p>&copy; 2025 Nama Perusahaan. Semua hak dilindungi.</p>
</footer>

<footer> Juga Bisa di Dalam Elemen Lain

Sama seperti <header>, <footer> bisa muncul di dalam <article> atau <section>:

<article>
  <header>
    <h2>Tips Belajar HTML</h2>
  </header>

  <p>Isi artikel yang sangat informatif...</p>

  <!-- Footer khusus artikel ini -->
  <footer>
    <p>Tags: <a href="#">HTML</a>, <a href="#">Tutorial</a></p>
    <p>Dibagikan 128 kali</p>
  </footer>
</article>

Struktur Halaman Lengkap

Berikut contoh halaman website lengkap yang menggabungkan ketiganya:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Website Saya</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: sans-serif;
      color: #1e1e1e;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    /* ===== HEADER ===== */
    header {
      background-color: #1e1e1e;
      color: white;
      padding: 0 40px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: white;
    }

    .logo-icon {
      width: 32px;
      height: 32px;
      background: #4a9eed;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 16px;
    }

    .logo-text {
      font-size: 18px;
      font-weight: 700;
    }

    /* ===== NAV ===== */
    nav ul {
      list-style: none;
      display: flex;
      gap: 8px;
      align-items: center;
    }

    nav ul li a {
      color: #d1d5db;
      text-decoration: none;
      font-size: 14px;
      padding: 6px 14px;
      border-radius: 6px;
      transition: all 0.2s;
    }

    nav ul li a:hover {
      color: white;
      background-color: rgba(255,255,255,0.1);
    }

    nav ul li a.aktif {
      color: white;
      background-color: #4a9eed;
    }

    .btn-nav {
      background-color: #4a9eed !important;
      color: white !important;
      padding: 8px 18px !important;
      border-radius: 8px !important;
      font-weight: 600 !important;
    }

    .btn-nav:hover {
      background-color: #2563eb !important;
    }

    /* ===== MAIN ===== */
    main {
      flex: 1;
      padding: 60px 40px;
      max-width: 960px;
      margin: 0 auto;
      width: 100%;
    }

    /* ===== FOOTER ===== */
    footer {
      background-color: #111827;
      color: #9ca3af;
      padding: 48px 40px 24px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 40px;
      max-width: 960px;
      margin: 0 auto 40px;
    }

    .footer-brand p {
      font-size: 14px;
      line-height: 1.7;
      margin-top: 12px;
      color: #6b7280;
    }

    .footer-col h4 {
      color: white;
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 16px;
    }

    .footer-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .footer-col ul li a {
      color: #6b7280;
      text-decoration: none;
      font-size: 14px;
      transition: color 0.2s;
    }

    .footer-col ul li a:hover {
      color: #4a9eed;
    }

    .footer-bottom {
      max-width: 960px;
      margin: 0 auto;
      padding-top: 24px;
      border-top: 1px solid #1f2937;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
    }

    .footer-bottom-links {
      display: flex;
      gap: 24px;
    }

    .footer-bottom-links a {
      color: #6b7280;
      text-decoration: none;
    }

    .footer-bottom-links a:hover {
      color: #4a9eed;
    }
  </style>
</head>
<body>

  <!-- ===== HEADER ===== -->
  <header>

    <!-- Logo -->
    <a href="/" class="logo">
      <div class="logo-icon">W</div>
      <span class="logo-text">WebSaya</span>
    </a>

    <!-- Navigasi Utama -->
    <nav aria-label="Navigasi Utama">
      <ul>
        <li><a href="/" class="aktif">Beranda</a></li>
        <li><a href="/tentang">Tentang</a></li>
        <li><a href="/layanan">Layanan</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/daftar" class="btn-nav">Mulai Gratis</a></li>
      </ul>
    </nav>

  </header>

  <!-- ===== KONTEN UTAMA ===== -->
  <main>

    <!-- Breadcrumb Nav -->
    <nav aria-label="Breadcrumb" style="margin-bottom: 32px;">
      <ol style="list-style:none; display:flex; gap:8px; font-size:14px; color:#6b7280;">
        <li><a href="/" style="color:#4a9eed; text-decoration:none;">Beranda</a></li>
        <li style="color:#d1d5db;">›</li>
        <li><a href="/blog" style="color:#4a9eed; text-decoration:none;">Blog</a></li>
        <li style="color:#d1d5db;">›</li>
        <li>Tutorial HTML Semantik</li>
      </ol>
    </nav>

    <h1 style="font-size:32px; margin-bottom:16px;">
      Belajar HTML Semantik
    </h1>
    <p style="color:#6b7280; line-height:1.8;">
      HTML semantik adalah cara menulis kode HTML yang bermakna — 
      menggunakan tag yang sesuai dengan peran konten, bukan hanya 
      untuk tujuan tampilan visual semata.
    </p>

  </main>

  <!-- ===== FOOTER ===== -->
  <footer>

    <div class="footer-grid">

      <!-- Brand & Deskripsi -->
      <div class="footer-brand">
        <a href="/" class="logo" style="color:white;">
          <div class="logo-icon">W</div>
          <span class="logo-text">WebSaya</span>
        </a>
        <p>
          Platform belajar web development terlengkap dalam 
          Bahasa Indonesia. Dari HTML dasar hingga framework modern.
        </p>
      </div>

      <!-- Link Produk -->
      <div class="footer-col">
        <h4>Produk</h4>
        <ul>
          <li><a href="#">Kursus HTML</a></li>
          <li><a href="#">Kursus CSS</a></li>
          <li><a href="#">Kursus JavaScript</a></li>
          <li><a href="#">Kursus React</a></li>
        </ul>
      </div>

      <!-- Link Perusahaan -->
      <div class="footer-col">
        <h4>Perusahaan</h4>
        <ul>
          <li><a href="#">Tentang Kami</a></li>
          <li><a href="#">Karir</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Press Kit</a></li>
        </ul>
      </div>

      <!-- Link Dukungan -->
      <div class="footer-col">
        <h4>Dukungan</h4>
        <ul>
          <li><a href="#">FAQ</a></li>
          <li><a href="#">Hubungi Kami</a></li>
          <li><a href="#">Komunitas</a></li>
          <li><a href="#">Status Layanan</a></li>
        </ul>
      </div>

    </div>

    <!-- Footer Bottom -->
    <div class="footer-bottom">
      <p>&copy; 2025 WebSaya. Semua hak dilindungi undang-undang.</p>
      <div class="footer-bottom-links">
        <a href="#">Kebijakan Privasi</a>
        <a href="#">Syarat & Ketentuan</a>
        <a href="#">Cookie</a>
      </div>
    </div>

  </footer>

</body>
</html>

Aturan yang Perlu Diingat

<header>:

✓ Boleh ada lebih dari satu per halaman
✓ Bisa berada di dalam article, section, aside
✗ Tidak boleh bersarang di dalam header lain
✗ Tidak boleh diletakkan di dalam footer

<nav>:

✓ Boleh ada lebih dari satu per halaman
✓ Gunakan aria-label jika ada beberapa nav
✓ Tidak semua kumpulan link perlu dibungkus nav
✗ Link di footer biasanya tidak perlu tag nav

<footer>:

✓ Boleh ada lebih dari satu per halaman
✓ Bisa berada di dalam article, section
✗ Tidak boleh bersarang di dalam footer lain
✗ Tidak boleh diletakkan di dalam header

Ringkasan

Tag Peran Semantik Konten Umum
<header> Kepala halaman atau section Logo, judul, navigasi utama
<nav> Blok navigasi Menu, breadcrumb, pagination
<footer> Kaki halaman atau section Hak cipta, link tambahan, kontak

💡 Tips: Gunakan aria-label setiap kali ada lebih dari satu <nav> atau <header> dalam satu halaman — ini membantu screen reader membedakan peran masing-masing elemen dan membuat halaman jauh lebih aksesibel. 🎯

Selanjutnya

Informasi Kursus

Kursus

HTML Dasar

Kategori

Semantik HTML

Durasi Pelajaran

20 menit

Pelajaran dalam Kategori Ini

  1. Header, Nav, Footer
  2. Aside & Figure
  3. Main, Section, Article
  4. div vs Semantik Tag