💡 ULASAN & REFERENSI • DIPERBARUI: 28 October 2026 • REDAKSI AZWINN

Header Website Sederhana: Kode HTML & CSS Responsif

Header website sederhana adalah bagian paling atas dari halaman web yang memuat logo dan menu navigasi utama. Pembuatan elemen ini membutuhkan struktur HTML semantik serta kode CSS dasar agar tampil rapi di desktop maupun perangkat seluler.

Desain header yang efektif mengutamakan kecepatan muat, keterbacaan teks, serta kemudahan akses bagi pengguna untuk berpindah halaman. Berikut adalah implementasi kode lengkap untuk membangun header website minimalis.

Kode HTML dan CSS Header Sederhana

Gunakan sintaks berikut untuk menempatkan logo di sisi kiri dan tautan navigasi di sisi kanan menggunakan teknik Flexbox.

<!-- HTML -->
<header class="site-header">
  <div class="container">
    <div class="logo">
      <a href="#">BrandLogo</a>
    </div>
    <nav class="main-nav">
      <ul>
        <li><a href="#">Beranda</a></li>
        <li><a href="#">Tentang</a></li>
        <li><a href="#">Layanan</a></li>
        <li><a href="#">Kontak</a></li>
      </ul>
    </nav>
  </div>
</header>

<!-- CSS -->
<style>
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  body {
    font-family: Arial, sans-serif;
  }
  .site-header {
    background-color: #ffffff;
    border-bottom: 1px solid #eaeaea;
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
  }
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logo a {
    font-size: 24px;
    font-weight: bold;
    color: #333333;
    text-decoration: none;
  }
  .main-nav ul {
    display: flex;
    list-style: none;
    gap: 20px;
  }
  .main-nav a {
    color: #555555;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s ease;
  }
  .main-nav a:hover {
    color: #007bff;
  }
  @media (max-width: 768px) {
    .container {
      flex-direction: column;
      gap: 10px;
    }
    .main-nav ul {
      gap: 15px;
    }
  }
</style>

Komponen Utama dalam Header Website

Setiap header fungsional umumnya, terlepas dari tingkat kesederhanaannya, wajib menyertakan beberapa elemen esensial agar navigasi situs berjalan lancar tanpa kendala teknis.

Komponen Fungsi Utama Rekomendasi Teknis
Logo / Brand Identitas visual situs dan tautan kembali ke halaman utama. Gunakan format SVG atau PNG transparan dengan ukuran file ringan.
Navigasi Utama Menu tautan menuju halaman penting (Beranda, Produk, Kontak). Batasi maksimal 5 hingga 7 menu agar tidak penuh.
Call to Action (CTA) Tombol interaktif untuk tindakan khusus (Daftar, Beli, Masuk). Letakkan di sisi paling kanan menu dengan warna kontras.
Indikator Mobile Ikon hamburger untuk membuka menu pada layar kecil. Wajib diaktifkan menggunakan media query CSS atau JavaScript.

Langkah Implementasi Teknis

Penerapan kode di atas ke dalam proyek pengembangan web dapat dilakukan melalui tahapan praktis berikut:

  1. Buat berkas HTML baru (misal: index.html) dan masukkan tag <header> beserta struktur di dalamnya.
  2. Tambahkan aturan CSS pada berkas terpisah atau sisipkan di dalam tag <style> pada bagian <head> dokumen.
  3. Uji responsivitas tata letak dengan mengubah ukuran jendela peramban (browser) atau menggunakan fitur Developer Tools (F12).
  4. Pastikan properti position: sticky; berfungsi dengan baik saat halaman digulir ke bawah.

Troubleshooting dan Tips Optimasi

Masalah umum yang sering terjadi pada pembuatan header sederhana adalah menu yang meluber keluar layar pada perangkat mobile. Pastikan untuk selalu menerapkan aturan @media (max-width: 768px) untuk mengubah arah tumpukan elemen dari horizontal menjadi vertikal menggunakan properti Flexbox flex-direction: column. Selain itu, hindari penggunaan gambar berukuran besar sebagai latar belakang header agar waktu muat halaman tetap optimal.

🔍 Orang Lain Juga Mencari Ini