Glosarium · Web dan software

Hero section

Hero section adalah bagian paling atas sebuah halaman web yang pertama terlihat saat halaman dibuka. Isinya biasanya judul utama, kalimat penjelas, gambar, dan tombol ajakan seperti Daftar atau Lihat demo.

Disebut juga: hero, hero banner, hero image, bagian pembuka

Hero section adalah istilah dari industri desain web, bukan istilah baku di kamus. Glosarium Optimizely menjelaskan hero image sebagai gambar banner besar yang ditempatkan menonjol di halaman web. Hero section adalah seluruh bagian pembuka itu, termasuk judul dan tombolnya.

Hero section dekat dengan konsep above the fold. Istilah ini berasal dari koran: berita di atas lipatan halaman terlihat pertama kali. Di web, above the fold berarti bagian yang terlihat sebelum pengunjung menggulir layar.

Isi hero section yang baik

  1. Judul yang menyebut situasi atau hasil yang dicari pengunjung.
  2. Satu atau dua kalimat yang menjelaskan cara kerjanya.
  3. Satu tombol ajakan utama yang menyebut tindakan berikutnya.
  4. Gambar atau demo yang menunjukkan produk, bukan hiasan saja.

Hero section berbeda dengan banner. Banner bisa muncul di mana saja, misalnya strip promo atau iklan di sisi halaman. Hero section selalu berada di bagian pembuka halaman.

Hero section di sanji.space

Hero di halaman utama sanji.space memuat judul “Kerja bareng, manusia & agen”. Di bawahnya ada satu kalimat penjelas dan dua tombol: Gabung waitlist dan Lihat demo. Di demo chat, Ayame juga mengerjakan hero dan tiga section untuk landing page rilis v2.

Kapan hero section penting

Hero section penting di setiap landing page, karena bagian ini menentukan apakah pengunjung lanjut membaca. Uji hero di layar HP, karena ruangnya jauh lebih sempit daripada di laptop.

Tanya jawab

Apa itu hero section di website?

Hero section adalah bagian paling atas halaman web yang pertama dilihat pengunjung. Isinya biasanya judul besar, kalimat penjelas, gambar atau demo, dan tombol ajakan. Bagian ini menyampaikan pesan utama halaman dalam beberapa detik pertama.

Apa isi hero section yang baik?

Hero section yang baik punya judul yang menyebut situasi atau hasil yang dicari pengunjung. Di bawahnya ada satu atau dua kalimat tentang cara kerjanya, satu tombol ajakan utama, dan gambar yang menunjukkan produk. Hindari judul umum yang bisa dipakai produk mana saja.

Apa bedanya hero section dan banner?

Hero section selalu berada di bagian pembuka halaman dan membawa pesan utama halaman itu. Banner adalah bidang gambar atau teks yang bisa muncul di mana saja, misalnya strip promo di atas halaman atau iklan di sisi halaman. Hero section bisa memakai banner besar sebagai latarnya.

Apa itu above the fold?

Above the fold adalah bagian halaman yang terlihat sebelum pengunjung menggulir layar. Istilah ini berasal dari koran, yaitu bagian di atas lipatan halaman depan. Karena ukuran layar berbeda-beda, batas above the fold di HP jauh lebih pendek daripada di laptop.

Istilah terkait

Sumber rujukan (2)

Diperbarui 25 September 2026

Lihat semua istilah