Perbedaan Tag <div> dan <span> dalam HTML
<div> dan <span> adalah dua tag penting dalam HTML yang digunakan untuk membungkus elemen. Namun, keduanya memiliki fungsi dan perilaku yang berbeda.
📦 Apa Itu Tag <div>?
- Tag
<div>adalah elemen blok (block-level) - Digunakan untuk mengelompokkan bagian besar konten
- Secara default, tampil memenuhi lebar layar
Contoh Penggunaan:
<div>
<h2>Judul Artikel</h2>
<p>Ini adalah isi artikelnya.</p>
</div>
🧩 Apa Itu Tag <span>?
- Tag
<span>adalah elemen sebaris (inline) - Digunakan untuk membungkus bagian kecil dari teks
- Tidak memengaruhi alur layout seperti
<div>
Contoh Penggunaan:
Harga: Rp 100.000
🔍 Perbandingan Singkat
| Fitur | <div> |
<span> |
|---|---|---|
| Tipe Elemen | Block | Inline |
| Penggunaan | Membungkus bagian besar atau grup elemen | Membungkus bagian kecil dalam satu baris teks |
| Contoh | <div><p>...</p></div> |
<span>...</span> |
🔄 Coba Jalankan:
🎯 Kesimpulan
<div>digunakan untuk elemen besar yang berdiri sendiri (blok)<span>digunakan untuk teks atau elemen kecil dalam baris (inline)- Keduanya sering digunakan dengan CSS untuk styling
🧪 Latihan Interaktif
Edit kode di bawah untuk membuat blok berwarna menggunakan <div> dan teks warna-warni menggunakan <span>:
📝 Tugas Praktik Mandiri
- Buat file HTML bernama
div-span.html - Buat satu blok konten menggunakan
<div>dengan latar berwarna - Di dalamnya, buat paragraf dengan kata-kata tertentu diberi warna menggunakan
<span> - Simpan dan buka di browser
- Eksperimen dengan warna dan ukuran teks!