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

Cara Membuat Include Header Footer HTML Sederhana & Efektif

Secara native, HTML murni tidak memiliki fungsi bawaan seperti include atau import untuk menyisipkan file luar. Namun, Anda dapat dengan mudah melakukan include header dan footer menggunakan tiga metode utama: JavaScript (Client-Side), PHP (Server-Side), atau Server-Side Includes (SSI) di server web Apache/Nginx.

Memisahkan header dan footer dari halaman utama sangat penting untuk menjaga kerapian kode (DRY principle: Don't Repeat Yourself). Ketika Anda perlu mengubah tautan navigasi di menu atas, Anda hanya perlu mengubah satu file saja tanpa harus mengedit ratusan halaman HTML satu per satu.

1. Metode JavaScript (Fetch API)

Metode ini sangat cocok jika website Anda hanya menggunakan file statis (.html) tanpa backend seperti PHP, dan di-host di layanan gratis seperti GitHub Pages atau Netlify.

Langkah-Langkah Teknis

  1. Buat file terpisah bernama header.html dan footer.html.
  2. Gunakan elemen kosong dengan id unik pada file HTML utama Anda sebagai wadah penampung.
  3. Tulis skrip JavaScript menggunakan fetch() untuk memuat isi file eksternal tersebut saat dokumen selesai dimuat.

Contoh Kode Implementasi

<!-- index.html -->
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Website Utama</title>
</head>
<body>
    <!-- Wadah Header -->
    <div id="header-container"></div>

    <main>
        <h1>Selamat Datang di Beranda</h1>
        <p>Konten utama website berada di sini.</p>
    </main>

    <!-- Wadah Footer -->
    <div id="footer-container"></div>

    <script>
        // Fungsi untuk memuat komponen HTML
        function loadComponent(id, file) {
            fetch(file)
                .then(response => response.text())
                .then(data => {
                    document.getElementById(id).innerHTML = data;
                });
        }

        loadComponent('header-container', 'header.html');
        loadComponent('footer-container', 'footer.html');
    </script>
</body>
</html>

2. Metode PHP (include / require)

Jika server hosting Anda mendukung PHP, ini adalah metode paling stabil dan ramah SEO karena konten header dan footer sudah dirender langsung oleh server sebelum dikirim ke browser pengguna.

Contoh Kode PHP

<!-- index.php -->
<?php include 'header.php'; ?>

<main>
    <h1>Halaman Utama PHP</h1>
    <p>Konten halaman dimuat di tengah.</p>
</main>

<?php include 'footer.php'; ?>

Tabel Komparasi Metode Include HTML

Metode Kelebihan Kekurangan Kebutuhan Server
JavaScript (Fetch) Bisa untuk file statis .html murni, mudah dipasang di GitHub Pages/Netlify. Kurang optimal untuk SEO karena konten dimuat setelah DOM siap (asinkron). Web server statis biasa
PHP Include Sangat ramah SEO, performa cepat, mudah digunakan. Harus mengubah ekstensi file dari .html menjadi .php. Server mendukung PHP
Server-Side Includes (SSI) Native di server Apache/Nginx, ekstensi file tetap .shtml. Perlu konfigurasi khusus pada file .htaccess atau nginx.conf. Apache / Nginx

Troubleshooting Lapangan

Jika Anda menggunakan metode JavaScript dan mengalami masalah di mana header tidak muncul saat file dibuka langsung dari komputer (lokal via protokol file:///), hal itu disebabkan oleh kebijakan keamanan browser (CORS policy) pada fungsi fetch(). Solusinya adalah menjalankan local server sederhana menggunakan ekstensi Live Server di Visual Studio Code atau menggunakan Node.js.

🔍 Orang Lain Juga Mencari Ini