Footer HTML: Tag footer, Contoh dan Layout

Cara membuat footer di HTML

Taruh konten penutup halamanmu di elemen <footer>, biasanya elemen terakhir di <body>. Sama seperti <header>, footer tidak punya tampilan default; CSS yang membuatnya menjadi bar footer:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Site footer</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    main { padding: 20px; }
    .site-footer { background: #111827; color: #d1d5db; padding: 20px; }
    .columns { display: flex; flex-wrap: wrap; gap: 32px; }
    .columns h2 { font-size: 14px; color: #fff; margin: 0 0 8px; }
    .columns ul { list-style: none; padding: 0; margin: 0; }
    .columns li { margin-bottom: 6px; }
    .site-footer a { color: #d1d5db; }
    .site-footer small { display: block; margin-top: 20px; border-top: 1px solid #374151; padding-top: 12px; }
  </style>
</head>
<body>
  <main>
    <h1>Page content</h1>
  </main>
  <footer class="site-footer">
    <div class="columns">
      <div>
        <h2>Product</h2>
        <ul><li><a href="#">Features</a></li><li><a href="#">Pricing</a></li></ul>
      </div>
      <div>
        <h2>Company</h2>
        <ul><li><a href="#">About</a></li><li><a href="#">Careers</a></li></ul>
      </div>
      <div>
        <h2>Legal</h2>
        <ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li></ul>
      </div>
    </div>
    <small>&copy; 2026 Acme Inc. All rights reserved.</small>
  </footer>
</body>
</html>

© menampilkan simbol ©. <small> menandai baris hak cipta sebagai teks kecil, yang memang maknanya di HTML, bukan sekadar font yang lebih kecil. Daftar link-nya adalah list <ul> sungguhan, jadi kebanyakan screen reader mengumumkan berapa banyak link di setiap kolom.

Menjaga footer tetap di bawah

Di halaman dengan sedikit konten, footer berada tepat di bawah konten itu, dengan ruang kosong di bawahnya. Perbaikannya adalah kolom flex: container setidaknya setinggi jendela, dan area utama mengambil semua sisa tingginya. Kotak abu-abu di bawah ini berperan sebagai jendela browser:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Footer at the bottom</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .window {
      height: 260px; border: 2px solid #e5e7eb;
      display: flex; flex-direction: column;
    }
    main { flex: 1; padding: 0 12px; }
    footer { background: #2563eb; color: #fff; padding: 10px 12px; }
  </style>
</head>
<body>
  <div class="window">
    <main>
      <p>Only one line of content.</p>
    </main>
    <footer>Footer stays at the bottom</footer>
  </div>
</body>
</html>

Hapus flex: 1 dari main dan footer melompat naik ke bawah paragraf. Di halaman sungguhan, taruh aturan yang sama di <body> dengan min-height: 100vh (dan margin: 0), bukan tinggi tetap, supaya footer berada di bagian bawah halaman yang pendek dan setelah konten di halaman yang panjang.

Footer di dalam artikel

<footer> menutup artikel atau bagian terdekatnya, jadi sebuah postingan blog atau komentar bisa punya footer sendiri, berisi penulis, tanggal, atau tag:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Article footer</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    article { border: 1px solid #e5e7eb; border-radius: 8px; padding: 0 14px; }
    article footer { border-top: 1px solid #e5e7eb; padding: 8px 0; color: #6b7280; font-size: 14px; }
    .tag { background: #e5e7eb; color: #111827; border-radius: 4px; padding: 2px 6px; }
  </style>
</head>
<body>
  <article>
    <h2>Five tips for cleaner HTML</h2>
    <p>Indent nested tags, close what you open, and name classes by meaning.</p>
    <footer>
      Posted in <span class="tag">html</span> <span class="tag">tips</span>
      by Ana on <time datetime="2026-09-24">September 24</time>
    </footer>
  </article>
</body>
</html>

Screen reader hanya memperlakukan footer tingkat halaman sebagai landmark contentinfo. Footer di dalam artikel adalah grup biasa, jadi tidak bersaing dengan footer situs.

Kontak dengan address

Untuk informasi kontak tentang halaman atau pemiliknya, pakai <address> di dalam footer. Elemen ini hanya untuk detail kontak (bukan untuk sembarang alamat pos di kontenmu), dan browser menampilkannya miring secara default:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>address</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <footer style="border-top: 2px solid #16a34a; padding-top: 8px;">
    <address>
      Acme Inc., 12 Market Street, Springfield<br>
      <a href="mailto:hello@example.com">hello@example.com</a>
    </address>
  </footer>
</body>
</html>

Baris baru di dalam address adalah salah satu penggunaan <br> yang tepat. Untuk penjelasan lebih lanjut tentang link email, lihat halaman mailto.

Apa saja yang boleh ada di footer

Footer bisa berisi link, list, form (pendaftaran newsletter), gambar, dan <nav>. Footer tidak boleh berisi <header>, <footer> lain, atau <main>. Menu kedua di footer bisa berupa <nav> dengan label yang membedakannya dari menu utama:

<footer>
  <nav aria-label="Footer">
    <a href="/privacy">Privacy</a>
    <a href="/terms">Terms</a>
  </nav>
</footer>

Kesalahan umum

• Menaruh <footer> di luar <body>. Semua yang terlihat ada di dalam <body>, termasuk footer.
• Memakai position: fixed supaya footer tetap di bawah. Footer fixed menutupi konten di layar kecil dan butuh padding di mana-mana. Pakai pola kolom flex.
• Memakai <address> untuk sembarang alamat. Elemen ini untuk detail kontak pemilik halaman atau penulis artikel. Alamat toko dalam daftar lokasi cukup ditulis dengan <p> biasa.
• Kolom link yang dibuat dari tag <br>. Pakai list <ul> supaya strukturnya diumumkan.
• Menulis tahun lalu secara permanen. Perbarui tahun hak cipta di template-mu, atau cetak dari server atau proses build.