Mengelompokkan isi: div, id, dan class

Halamanmu makin panjang: ada judul, perkenalan, hobi, kontak. Untuk browser, semuanya cuma barisan tag yang berjajar. Dia tidak tahu mana “bagian perkenalan” dan mana “bagian kontak”.

Padahal kita butuh itu. Nanti kamu mau mewarnai hanya bagian kontak, atau membuat tombol yang menyembunyikan hanya bagian hobi. Caranya: kelompokkan dulu, lalu beri nama. Itulah isi pelajaran ini.

div: kotak yang tidak terlihat

Tag <div> adalah pembungkus. Ia tidak menampilkan apa-apa sendiri. Fungsinya cuma satu: menyatukan beberapa elemen jadi satu kelompok.

<div>
  <h2>Hobi</h2>
  <p>Menggambar</p>
  <p>Membaca</p>
</div>

Kalau dibuka di browser, tampilannya sama saja dengan tanpa <div>. Bedanya ada di balik layar: sekarang judul dan dua hobi itu satu paket.

span: pembungkus di dalam kalimat

<div> selalu mulai di baris baru dan memakan satu baris penuh. Kadang kamu cuma mau membungkus sepotong kata di tengah kalimat. Untuk itu ada <span>:

<p>Harga hari ini <span>Rp 15.000</span> saja.</p>

Sama seperti <div>, <span> tidak mengubah tampilan sendirian. Bedanya: <div> untuk bagian besar, <span> untuk potongan di dalam baris.

Tag semantik: pembungkus yang punya nama

Pembungkus polos <div> itu cocok untuk mengelompokkan apa saja. Tapi HTML juga punya pembungkus yang namanya sudah menjelaskan fungsinya. Hasilnya sama-sama kotak, bedanya makna. Pembaca layar dan mesin pencari terbantu karena mereka jadi tahu mana kepala halaman, mana isi utama.

Aturan praktisnya: kalau ada tag semantik yang cocok, pakai itu. Kalau tidak ada, pakai <div>.

id dan class: memberi nama

Kelompok sudah ada. Sekarang kasih nama, lewat dua atributAtributKeterangan tambahan di dalam tag pembuka, seperti id, type, atau placeholder.Penjelasan lengkap →:

id: nama unik, seperti nama lengkap. Satu id hanya boleh dipakai satu kali di satu halaman.

<section id="kontak">
  <h2>Kontak</h2>
</section>

class: nama kelompok, seperti seragam. Banyak elemen boleh memakai class yang sama, dan satu elemen boleh punya lebih dari satu class (dipisah spasi).

<p class="hobi">Menggambar</p>
<p class="hobi">Membaca</p>

Bedanya jelas kalau kamu bayangkan satu kelas di sekolah: idID (nama elemen)Nama unik untuk satu elemen, supaya mudah ditunjuk oleh CSS atau JavaScript.Penjelasan lengkap → itu seperti nomor induk siswa (tidak ada yang kembar), sedangkan classClassNama kelompok yang bisa ditempelkan ke banyak elemen, supaya semuanya didandani sama oleh CSS.Penjelasan lengkap → itu seperti seragam (banyak anak memakainya sekaligus).

Aturan nama untuk keduanya: huruf kecil, tanpa spasi, pakai tanda hubung kalau lebih dari satu kata (kartu-profil), dan jangan diawali angka.

Kenapa ini penting?

Karena id dan class itu pegangan. Tanpa nama, CSSCSSBahasa untuk mengatur tampilan halaman web, seperti warna, ukuran, dan jarak.Penjelasan lengkap → dan JavaScriptJavaScriptBahasa pemrograman yang bikin halaman web bisa bereaksi, misalnya saat diklik, menghitung, atau menyimpan data.Penjelasan lengkap → tidak bisa menunjuk elemen yang kamu maksud.

• Di CSS, id ditunjuk dengan tanda pagar (#kontak) dan class dengan titik (.hobi). Kamu akan memakainya di Bab 4, CSS.
• Di JavaScript, kamu memanggil elemen lewat id-nya, misalnya untuk mengisi tulisan atau membaca isi kotak. Kamu sudah melihat ini di Bab 5, JavaScript.

Untuk sekarang, kamu cukup bisa memasang nama itu dengan benar. Memakainya menyusul.

Coba sendiri: rapikan halaman profil

Di kotak ini ada halaman profil yang masih berantakan, semua tag berjajar tanpa kelompok. Ikuti tiga komentar TODO di kode:

1. Bungkus judul dan perkenalan dengan <header>.
2. Bungkus semua isi utama dengan <main>, dan kelompokkan tiap topik dengan <section>. Tambahkan <footer> untuk baris terakhir.
3. Beri id="kontak" pada bagian kontak, dan class="hobi" pada tiap hobi.

Kalau macet, tekan tombol jawaban. Tampilan di kanan tidak berubah sama sekali, dan itu memang benar: kamu menambah struktur, bukan warna.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Profil Rani</title>
</head>
<body>
  <!-- TODO 1: bungkus judul dan perkenalan dengan tag header -->
  <h1>Rani Putri</h1>
  <p>Mahasiswa baru yang lagi belajar bikin web.</p>

  <!-- TODO 2: bungkus isi utama dengan tag main -->
  <h2>Tentang saya</h2>
  <p>Saya suka menggambar dan kopi. Cita-cita saya membuat aplikasi sendiri.</p>

  <h2>Hobi</h2>
  <p>Menggambar</p>
  <p>Membaca</p>
  <p>Jalan pagi</p>

  <!-- TODO 3: beri id="kontak" pada bagian kontak, dan class="hobi" pada tiap hobi di atas -->
  <h2>Kontak</h2>
  <p>Email: rani@contoh.com</p>

  <p>Dibuat dengan HTML, 2026.</p>
</body>
</html>

Kesalahan umum

• Lupa menutup </div>. Setiap <div> butuh pasangan. Rapikan indentasi supaya mudah dicek.
• Id kembar. Dua elemen dengan id="hobi". Ganti salah satunya, atau ubah jadi class.
• Memakai spasi di nama. class="kartu profil" dibaca sebagai dua class (kartu dan profil). Kalau maksudmu satu nama, tulis kartu-profil.
• Menumpuk div di mana-mana. Kalau ada tag semantik yang pas, pakai itu.