Ketika membuat sebuah website, perhatian biasanya lebih banyak diberikan pada bagian header, navbar, dan konten utama. Padahal, ada satu bagian yang juga memiliki peran penting, yaitu footer website.

Footer berada di bagian paling bawah halaman dan biasanya berisi informasi tambahan seperti identitas website, navigasi, kontak, media sosial, hingga copyright.

Footer yang dibuat dengan baik tidak hanya membuat website terlihat lebih profesional, tetapi juga membantu pengunjung menemukan informasi tambahan dengan lebih mudah.

Kabar baiknya, membuat footer website tidak membutuhkan kode yang terlalu rumit. Dengan memahami dasar HTML dan CSS, Anda sudah bisa membuat footer sederhana hingga footer yang terlihat modern.

Apa Itu Footer Website?

Footer website adalah bagian yang biasanya ditempatkan di bagian paling bawah sebuah halaman website.

Footer dapat digunakan untuk menampilkan informasi yang tidak perlu diletakkan di bagian utama halaman.

Contohnya:

• Informasi website.
• Link navigasi.
• Kontak.
• Alamat.
• Media sosial.
• Kebijakan privasi.
• Copyright.
• Link layanan.

Struktur sederhananya dapat digambarkan seperti berikut:

+---------------------------+
|          Header           |
+---------------------------+
|          Navbar           |
+---------------------------+
|                           |
|       Konten Website      |
|                           |
+---------------------------+
|          Footer           |
+---------------------------+

Dengan struktur tersebut, pengunjung dapat mengetahui bahwa footer merupakan bagian akhir dari halaman website.

Mengapa Footer Website Penting?

Footer bukan sekadar hiasan di bagian bawah halaman.

Footer dapat memberikan beberapa manfaat bagi website.

1. Menyediakan Informasi Tambahan

Informasi seperti kontak, alamat, dan kebijakan website dapat diletakkan di footer.

2. Mempermudah Navigasi

Footer dapat menyediakan link menuju halaman tertentu yang mungkin tidak terlihat dari konten utama.

3. Meningkatkan Profesionalitas

Footer yang tertata rapi dapat membuat website terlihat lebih lengkap dan profesional.

4. Membantu Pengunjung

Ketika pengunjung sampai di bagian paling bawah halaman, mereka masih bisa menemukan navigasi dan informasi penting.

Struktur Dasar Footer dengan HTML

HTML digunakan untuk membuat struktur footer.

HTML5 menyediakan elemen khusus bernama <footer>.

Contoh paling sederhana:

<footer>
    <p>&copy; 2026 NgodingDaily. Semua Hak Dilindungi.</p>
</footer>

Kode tersebut menghasilkan footer sederhana yang berisi informasi copyright.

Walaupun sederhana, struktur tersebut sudah menggunakan elemen HTML semantik yang tepat.

Membuat Footer dengan Informasi Website

Footer dapat dibuat lebih informatif dengan menambahkan nama dan deskripsi website.

Contoh:

<footer>
    <h2>NgodingDaily</h2>

    <p>
        Belajar coding dan teknologi dengan mudah setiap hari.
    </p>

    <p>&copy; 2026 NgodingDaily. Semua Hak Dilindungi.</p>
</footer>

Dengan tambahan informasi tersebut, pengunjung dapat mengetahui identitas website.

Menambahkan Menu Navigasi pada Footer

Footer juga dapat digunakan untuk menampilkan beberapa link penting.

Contohnya:

<footer>
    <h2>NgodingDaily</h2>

    <nav>
        <a href="#">Beranda</a>
        <a href="#">Artikel</a>
        <a href="#">Tutorial</a>
        <a href="#">Tentang Kami</a>
        <a href="#">Kontak</a>
    </nav>

    <p>&copy; 2026 NgodingDaily</p>
</footer>

Penggunaan link pada footer membantu pengunjung berpindah ke halaman lain tanpa harus kembali ke bagian atas website.

Membuat Footer dengan Beberapa Kolom

Jika website memiliki banyak informasi, footer dapat dibagi menjadi beberapa kolom.

Contohnya:

<footer>
    <div class="footer-container">

        <div class="footer-column">
            <h3>NgodingDaily</h3>
            <p>
                Tempat belajar coding dan teknologi
                untuk pemula.
            </p>
        </div>

        <div class="footer-column">
            <h3>Menu</h3>
            <a href="#">Beranda</a>
            <a href="#">Artikel</a>
            <a href="#">Tutorial</a>
        </div>

        <div class="footer-column">
            <h3>Kontak</h3>
            <p>Email: info@example.com</p>
            <p>Indonesia</p>
        </div>

    </div>

    <div class="copyright">
        <p>&copy; 2026 NgodingDaily. Semua Hak Dilindungi.</p>
    </div>
</footer>

Struktur tersebut sudah lebih fleksibel dan dapat dikembangkan menjadi footer modern.

Memberikan Tampilan dengan CSS

Setelah struktur HTML selesai, langkah berikutnya adalah memberikan styling menggunakan CSS.

Contoh:

footer {
    background-color: #222;
    color: white;
    padding: 40px 20px;
}

CSS tersebut memberikan warna background gelap dan membuat teks menjadi putih.

Mengatur Layout Footer dengan Flexbox

Agar beberapa kolom dapat ditampilkan secara berdampingan, kita bisa menggunakan Flexbox.

.footer-container {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    max-width: 1100px;
    margin: auto;
}

Dengan Flexbox, kolom footer dapat disusun dengan lebih mudah.

Mengatur Tampilan Kolom Footer

Berikut contoh styling untuk setiap kolom:

.footer-column {
    flex: 1;
}

.footer-column h3 {
    margin-bottom: 15px;
}

.footer-column a {
    display: block;
    color: white;
    text-decoration: none;
    margin-bottom: 8px;
}

Link dibuat menjadi display: block agar setiap link berada pada baris yang berbeda.

Membuat Footer Responsive

Footer yang bagus tidak hanya terlihat baik di desktop. Footer juga harus nyaman digunakan pada smartphone.

Kita dapat menggunakan Media Query.

@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
    }
}

Ketika lebar layar lebih kecil, kolom footer akan disusun secara vertikal.

Contohnya:

Desktop:

NgodingDaily | Menu | Kontak


Smartphone:

NgodingDaily

Menu

Kontak

Dengan begitu, footer tetap mudah dibaca pada berbagai ukuran layar.

Contoh Footer Website Lengkap

Berikut contoh sederhana yang bisa langsung Anda jadikan bahan latihan.

HTML

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Footer Website</title>

    <link rel="stylesheet" href="style.css">
</head>

<body>

    <main>
        <h1>Selamat Datang di NgodingDaily</h1>

        <p>
            Belajar HTML, CSS, JavaScript, dan teknologi
            dengan cara yang mudah dipahami.
        </p>
    </main>

    <footer>

        <div class="footer-container">

            <div class="footer-column">
                <h2>NgodingDaily</h2>

                <p>
                    Media belajar coding dan teknologi
                    untuk pemula.
                </p>
            </div>

            <div class="footer-column">
                <h3>Menu</h3>

                <a href="#">Beranda</a>
                <a href="#">Artikel</a>
                <a href="#">Tutorial</a>
                <a href="#">Tentang Kami</a>
            </div>

            <div class="footer-column">
                <h3>Kontak</h3>

                <p>Email: info@example.com</p>
                <p>Indonesia</p>
            </div>

        </div>

        <div class="copyright">
            <p>
                &copy; 2026 NgodingDaily.
                Semua Hak Dilindungi.
            </p>
        </div>

    </footer>

</body>
</html>

CSS

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

main {
    min-height: 500px;
    padding: 40px;
}

footer {
    background-color: #222;
    color: white;
    padding: 40px 20px 20px;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    max-width: 1100px;
    margin: auto;
}

.footer-column {
    flex: 1;
}

.footer-column h2,
.footer-column h3 {
    margin-top: 0;
}

.footer-column a {
    display: block;
    color: white;
    text-decoration: none;
    margin-bottom: 8px;
}

.footer-column a:hover {
    text-decoration: underline;
}

.copyright {
    text-align: center;
    border-top: 1px solid #555;
    margin-top: 30px;
    padding-top: 20px;
}

@media (max-width: 768px) {

    .footer-container {
        flex-direction: column;
    }

}

Contoh tersebut sudah memiliki beberapa komponen penting, yaitu informasi website, menu navigasi, kontak, copyright, serta dukungan responsive untuk perangkat dengan layar lebih kecil.

Tips Membuat Footer Website yang Menarik

Membuat footer sebenarnya tidak sulit. Namun, ada beberapa hal yang perlu diperhatikan agar hasilnya tetap nyaman digunakan.

1. Jangan Memasukkan Terlalu Banyak Informasi

Footer sebaiknya berisi informasi yang memang berguna.

Terlalu banyak link dan teks dapat membuat footer terlihat berantakan.

2. Gunakan Struktur yang Jelas

Kelompokkan informasi berdasarkan kategori.

Misalnya:

Tentang Kami
Menu
Layanan
Kontak
Media Sosial

Dengan pengelompokan tersebut, pengunjung lebih mudah menemukan informasi yang dibutuhkan.

3. Pastikan Link Mudah Dibaca

Gunakan ukuran teks dan jarak antarlink yang cukup.

Terutama pada smartphone, link jangan dibuat terlalu kecil atau terlalu berdekatan.

4. Gunakan Warna yang Konsisten

Warna footer sebaiknya tetap sesuai dengan identitas visual website.

Tidak perlu menggunakan terlalu banyak warna.

Gunakan kombinasi yang membuat teks dan link tetap mudah dibaca.

5. Buat Footer Responsive

Pastikan footer dapat menyesuaikan diri dengan berbagai ukuran layar.

Gunakan Flexbox, Grid, dan Media Query untuk membantu membuat layout responsive.

Kesalahan yang Sering Terjadi Saat Membuat Footer

Ada beberapa kesalahan yang sebaiknya dihindari.

Footer Terlalu Penuh

Memasukkan semua link ke footer dapat membuat tampilannya sulit dipahami.

Tidak Responsive

Footer yang hanya dirancang untuk desktop dapat terlihat berantakan pada smartphone.

Ukuran Teks Terlalu Kecil

Teks yang terlalu kecil dapat menyulitkan pengunjung.

Link Sulit Diklik

Link yang terlalu berdekatan dapat menyulitkan pengguna smartphone.

Tidak Menggunakan HTML Semantik

Gunakan elemen <footer> untuk menandai bagian footer sehingga struktur HTML lebih jelas.

Apakah Footer Berpengaruh terhadap SEO?

Footer bukan faktor tunggal yang menentukan peringkat sebuah website di mesin pencari. Namun, footer yang terstruktur dengan baik dapat membantu navigasi dan internal linking website.

Link menuju halaman penting seperti:

• Tentang Kami
• Kontak
• Kebijakan Privasi
• Artikel
• Kategori

dapat membantu pengunjung menemukan halaman tersebut dengan lebih mudah.

Yang terpenting, jangan memasukkan link secara berlebihan hanya untuk tujuan SEO. Utamakan pengalaman pengguna dan relevansi link.

Kesimpulan

Cara membuat footer website dengan HTML dan CSS sebenarnya cukup mudah jika Anda memahami struktur HTML dan dasar CSS.

HTML digunakan untuk membuat struktur seperti nama website, navigasi, informasi kontak, dan copyright. Sementara itu, CSS digunakan untuk mengatur layout, warna, jarak, ukuran teks, hingga membuat footer responsive.

Footer yang baik bukan berarti harus memiliki desain yang rumit. Yang terpenting adalah rapi, informatif, mudah digunakan, dan nyaman dilihat di desktop maupun smartphone.

Jika Anda sedang belajar web development, membuat footer bisa menjadi latihan yang bagus untuk memahami HTML semantik, Flexbox, responsive design, dan dasar layout CSS.

Mulailah dari footer sederhana, lalu kembangkan secara bertahap sesuai kebutuhan website Anda.