Cara Membuat dan Menata Header HTML dengan CSS Lengkap
Irhan Hisyam Dwi Nugroho
•
11 May 2025
•
807
Cara membuat header HTML dengan CSS itu mudah, Warga Bimbingan! MinDi akan menunjukkan langkah-langkah simpel untuk membuat dan menata header yang menarik serta responsif.
Dengan CSS, header kamu bisa tampil lebih menarik dan mudah dinavigasi. Yuk, ikuti tips dari MinDi agar tampilan situs kamu lebih keren!
Baca juga : Panduan Memilih Bootcamp Front-End Development Terbaik 2025
Pengertian Header HTML CSS
Header dalam HTML adalah elemen yang digunakan untuk menampilkan informasi penting di bagian atas halaman web, seperti judul, logo, atau menu navigasi.
Elemen ini biasanya dibungkus dalam tag <header>, yang memberi struktur pada halaman dan memudahkan pengunjung dalam menavigasi situs.
Dengan CSS, tampilan header dapat disesuaikan, mulai dari warna latar belakang, ukuran font, hingga penataan elemen-elemen di dalamnya.
Penggunaan header yang baik tidak hanya meningkatkan estetika tetapi juga mempermudah pengguna dalam menemukan informasi utama di halaman.
Baca juga : Cara Membuat HTML di Notepad: Langkah Mudah untuk Pemula
Cara Membuat Header HTML
Sumber: Canva
Membuat header di halaman web adalah salah satu bagian penting dalam desain situs. Sekarang, mari kita lihat bagaimana cara membuat header yang menarik menggunakan HTML dan CSS.
1. Buat Struktur Dasar Header dengan HTML
Langkah pertama adalah membuat elemen dasar header dengan menggunakan tag <header>. Ini akan menjadi wadah bagi konten header seperti judul dan menu navigasi.
Contoh Kode:
<header> <h1>Selamat datang di Situs Kami</h1> </header> |
Penjelasan:
Di sini, kita menggunakan tag <header> untuk menampung elemen-elemen yang ada di bagian atas halaman, seperti judul situs yang ada dalam tag <h1>.
2. Tambahkan Navigasi Menggunakan Elemen <nav>
Selanjutnya, kita perlu menambahkan elemen navigasi untuk memudahkan pengunjung berpindah antar halaman. Elemen <nav> digunakan untuk menampung menu navigasi situs.
Contoh Kode:
<header> <h1>Selamat datang di Situs Kami</h1> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header> |
Penjelasan:
Dalam elemen <nav>, kita menggunakan list <ul> untuk menampilkan menu dan menghubungkannya dengan tag <a> yang berfungsi sebagai tautan.
Baca juga : 7 Rekomendasi Bootcamp Programmer Gratis & Bersertifikat
3. Menata Header dengan CSS
Setelah kita membuat struktur HTML, kita bisa melanjutkan dengan menata header agar lebih menarik menggunakan CSS. Misalnya, memberi latar belakang warna, mengatur ukuran font, dan tata letak menu.
Contoh Kode:
header { background-color: #333; color: white; padding: 20px; text-align: center; } nav ul { list-style-type: none; padding: 0; } nav ul li { display: inline; margin: 0 10px; } nav ul li a { color: white; text-decoration: none; } |
Penjelasan:
CSS ini memberikan latar belakang gelap pada header, mengubah warna teks menjadi putih, dan menata menu sehingga terlihat rapi dan mudah diakses.
Baca juga : Cara Membuat Pop Up di HTML: Panduan Mudah untuk Pemula
4. Responsif dengan Media Queries
Untuk memastikan header tetap tampil baik di berbagai perangkat, kita bisa menggunakan media queries. Dengan ini, header akan menyesuaikan tampilannya berdasarkan ukuran layar perangkat.
Contoh Kode:
@media (max-width: 600px) { header { text-align: left; } nav ul { text-align: left; } } |
Penjelasan:
Media query di atas akan mengubah alignment teks menjadi kiri ketika lebar layar kurang dari 600px, membuat tampilan header lebih rapi di perangkat mobile.
Baca juga : Cara Membuat Website dengan HTML dan CSS Langkah Mudah
5. Tambahkan Logo (Opsional)
Jika kamu ingin menambahkan logo ke dalam header, kamu bisa menggunakan elemen <img> di dalam elemen <header>.
Logo biasanya diletakkan di sebelah kiri judul atau menu navigasi untuk memberikan identitas visual pada situs kamu.
Contoh Kode Lengkap:
<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Header dengan Logo</title> <style> /* Menata Header */ header { background-color: #333; color: white; padding: 20px; text-align: center; } /* Menata Navigasi */ nav ul { list-style-type: none; padding: 0; } nav ul li { display: inline; margin: 0 10px; } nav ul li a { color: white; text-decoration: none; } /* Menata Logo */ header img { width: 50px; vertical-align: middle; margin-right: 10px; } /* Responsif di layar kecil */ @media (max-width: 600px) { header { text-align: left; } nav ul { text-align: left; } } </style> </head> <body> <header> <!-- Logo --> <img src="logo.png" alt="Logo" width="50"> <h1>Selamat datang di Situs Kami</h1>
<!-- Navigasi --> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header> </body> </html> |
Berikut adalah Hasil Compile Code:
Penjelasan Kode:
- Logo: Logo ditempatkan dalam tag <img> dengan src mengarah ke file gambar logo (misalnya logo.png). Kita juga menggunakan atribut alt untuk deskripsi logo, yang penting untuk aksesibilitas dan SEO.
CSS:
- Logo diatur agar memiliki lebar 50px dan posisinya sedikit di atas tengah (vertical-align: middle).
- Menambahkan jarak antara logo dan judul dengan margin-right: 10px.
- Tampilan header tetap responsif menggunakan media query, yang akan mengubah teks menjadi rata kiri pada layar kecil.
Tips Mempercantik Header
Sumber: Canva
Header adalah elemen pertama yang dilihat pengunjung, jadi penting untuk membuatnya menarik dan fungsional. Berikut beberapa tips untuk mempercantik header tanpa harus menyentuh kode!
1. Gunakan Background yang Menarik
Pilih background yang relevan dengan tema situs kamu, seperti gambar berkualitas tinggi atau gradien warna yang lembut.
Background yang menarik dapat memberikan kesan pertama yang kuat pada pengunjung dan membuat header lebih menonjol. Pastikan background tidak mengganggu teks atau elemen lainnya agar tetap mudah dibaca.
2. Sederhanakan Navigasi
Pastikan menu navigasi di header sederhana dan mudah diakses. Hindari menambahkan terlalu banyak opsi, cukup pilih yang paling penting agar pengunjung tidak bingung.
Penggunaan dropdown menu juga bisa membantu untuk menjaga tampilan tetap rapi dan terorganisir.
3. Gunakan Font yang Sesuai
Pemilihan font yang tepat bisa membuat header kamu terlihat lebih profesional dan elegan. Pilih font yang mudah dibaca, namun tetap sesuai dengan gaya dan tema situs.
Pastikan ukuran font cukup besar agar header terlihat jelas tanpa terlihat terlalu mencolok, dan hindari penggunaan lebih dari dua jenis font di header untuk menjaga kesan rapi dan konsisten.
4. Tambahkan Elemen Branding
Tambahkan elemen branding seperti logo atau tagline di header untuk memberi identitas yang kuat pada situs kamu.
Logo yang jelas dapat membantu pengunjung mengenali situs kamu dengan mudah dan meningkatkan kredibilitas.
Pastikan logo dan elemen branding lainnya tidak terlalu besar, agar tidak mengganggu elemen penting lainnya di header.
Ingin Menjadi Web Developer Profesional?
Setelah mempelajari Cara Membuat dan Menata Header HTML dengan CSS Lengkap, waktunya untuk memperdalam kemampuanmu dan menguasai lebih banyak aspek dalam dunia pengembangan web.
Di Bootcamp Web Development di dibimbing.id, kamu akan belajar langsung dari mentor berpengalaman, menguasai HTML, CSS, JavaScript, dan teknik desain web lainnya.
Di bootcamp ini, kamu tidak hanya belajar teori, tetapi juga mendapatkan pengalaman praktis untuk membangun website profesional.
Dengan lebih dari 840+ hiring partner dan tingkat keberhasilan alumni 96%, kariermu di industri web development dan desain semakin terbuka lebar.
Jangan lewatkan kesempatan ini! Daftar sekarang di sini dan mulailah perjalananmu menjadi Web Developer profesional. #BimbingSampeJadi!
Referensi
Tags
Irhan Hisyam Dwi Nugroho
Irhan Hisyam Dwi Nugroho is an SEO Specialist and Content Writer with 4 years of experience in optimizing websites and writing relevant content for various brands and industries. Currently, I also work as a Content Writer at Dibimbing.id and actively share content about technology, SEO, and digital marketing through various platforms.
