div, span, & Atribut Global
Kotak pembungkus netral div dan span, perbedaan elemen block dan inline, serta atribut yang bisa dipakai di semua elemen: id, class, title, lang, hidden, dan data-*.
Elemen block dan inline
Setiap elemen HTML punya "sifat bawaan" dalam menempati ruang:
| Block | Inline | |
|---|---|---|
| Perilaku | Selalu mulai di baris baru dan melebar penuh | Mengalir di dalam baris teks, selebar isinya |
| Contoh | p, h1–h6, div, ul, table, section | a, strong, em, span, img, code |
| Boleh berisi | Block dan inline | Umumnya hanya inline |
<div> dan <span>: pembungkus netral
Kadang kamu perlu membungkus beberapa elemen untuk keperluan tata letak atau gaya, tetapi tidak ada elemen semantik yang cocok. Di sinilah div dan span dipakai. Keduanya tidak punya makna dan tampilan bawaan.
| Elemen | Jenis | Dipakai untuk |
|---|---|---|
<div> | Block | Membungkus sekelompok elemen (kartu, kolom, wadah) |
<span> | Inline | Membungkus sebagian teks di dalam kalimat |
<div class="kartu">
<h3>Paket Dasar</h3>
<p>Harga <span class="harga">Rp 50.000</span> per bulan.</p>
</div>Atribut global
Atribut global bisa dipasang pada semua elemen HTML:
| Atribut | Fungsi | Contoh |
|---|---|---|
id | Pengenal unik (hanya satu elemen per halaman) | id="header-utama" |
class | Kelompok untuk di-style; boleh dipakai banyak elemen dan boleh lebih dari satu nama | class="kartu promo" |
title | Tooltip saat kursor diarahkan | title="Klik untuk detail" |
lang | Bahasa elemen | lang="en" |
hidden | Menyembunyikan elemen | <p hidden> |
style | CSS langsung di elemen (hindari bila bisa) | style="color:red" |
data-* | Menyimpan data kustom untuk JavaScript | data-id="42" |
Aturan id dan class
- id harus unik, tanpa spasi, dan jangan diawali angka.
- class bisa ganda dipisah spasi:
class="tombol besar". - Beri nama yang menjelaskan fungsi, bukan tampilan:
peringatanlebih baik daripadamerah. - Gunakan huruf kecil dan tanda hubung:
kartu-produk.
id vs class: id seperti nomor KTP (satu orang satu nomor); class seperti nama kelompok (banyak orang bisa sama-sama "anggota tim").