Block & Inline (Div & Span)

Memahami cara elemen menempati ruang di layar.

Penjelasan Lengkap

Setiap elemen HTML punya "sifat" bawaan dalam menempati ruang di layar.

• Block Element : Elemen yang selalu memulai baris baru dan memakan seluruh lebar layar (misal: h1, p, div).

• Inline Element : Elemen yang hanya memakan ruang seperlunya dan tidak membuat baris baru (misal: a, span, b).

• <div> : Wadah kosong tipe block. Digunakan untuk membungkus banyak elemen agar bisa diatur posisinya.

• <span> : Wadah kosong tipe inline. Digunakan untuk membungkus satu atau dua kata saja di dalam paragraf.

Contoh Kode

<div style="background: lightblue;">Ini Div (Block)</div>
<span style="background: yellow;">Ini Span (Inline)</span>

Hasil Tampilan

Hasil Preview

Tugas Praktik (Pertanyaan)

Manakah elemen yang sifatnya memakan seluruh lebar layar dan selalu membuat baris baru, Div atau Span?