HTML 08: Memahami Elemen Block dan Inline

Sebelum belajar layout CSS, Anda perlu memahami bagaimana elemen ditempatkan dalam aliran normal dokumen. Secara sederhana, ada elemen yang memulai baris baru dan ada yang mengalir bersama teks.

1. Elemen Block

Elemen block biasanya memulai baris baru dan menggunakan ruang horizontal yang tersedia.

Contoh umum: div, p, heading, ul, ol, section, article, dan form.

“Block” adalah perilaku tampilan bawaan, bukan berarti elemen tersebut selalu berbentuk kotak yang terlihat.

2. Elemen Inline

Elemen inline mengalir di dalam baris teks dan hanya memakai ruang sesuai isinya.

Contoh umum: a, span, strong, em, mark, dan code.

Jangan menaruh elemen block seperti div di dalam elemen inline seperti span hanya untuk mendapatkan tampilan tertentu.

3. div dan span

Keduanya tidak membawa makna khusus.

div cocok sebagai pembungkus block untuk layout. span cocok untuk bagian kecil di dalam teks. Jika ada elemen semantik yang tepat, gunakan elemen tersebut terlebih dahulu.

4. CSS Dapat Mengubah Tampilan

CSS dapat mengubah nilai display, tetapi makna HTML tidak ikut berubah. Link tetap link meskipun ditampilkan sebagai block.

Kesalahan Umum

• Menggunakan banyak <br> agar elemen inline turun baris.
• Membungkus semua hal dengan div tanpa memeriksa elemen semantik.
• Menganggap block selalu memiliki lebar tetap.
• Mengubah struktur HTML hanya untuk mengejar tampilan sementara.

Latihan

Buat sebuah kartu menggunakan article, h2, dan p. Gunakan span hanya untuk menandai harga di dalam paragraf. Perhatikan elemen mana yang memulai baris baru.

Rangkuman

Block dan inline menjelaskan perilaku awal elemen dalam aliran dokumen. Gunakan HTML berdasarkan makna, kemudian gunakan CSS jika tampilannya perlu diubah.