Div dan Span

Sepanjang Section ini kita memakai elemen yang setiap satu memikul makna: heading untuk judul, p untuk paragraf, strong untuk penekanan. Namun dua kebutuhan tetap tidak terjawab: mengelompokkan beberapa elemen demi penataan CSS, dan menandai sepotong teks sebagai sasaran skrip atau gaya.

Untuk dua kebutuhan itulah HTML menyediakan div dan span — dua wadah generik yang sama sekali tidak membawa makna. Keduanya berguna justru karena kepolosannya.

Dua Wadah Tanpa Makna #

div adalah wadah blok: isinya berdiri sebagai kelompok tersendiri dan memenuhi lebar yang tersedia, sejajar perilaku paragraf. span adalah wadah inline: isinya menempel di dalam kalimat tanpa memutus alur teks, sejajar perilaku em. Kedua wadah tidak mengumumkan apa pun tentang isinya — tidak seperti p yang menyatakan “paragraf” atau code yang menyatakan “kode”.

Aturan pemakaiannya: gunakan div atau span hanya ketika tidak ada elemen semantik yang lebih tepat — misalnya butuh pembungkus untuk kartu gaya, atau butuh penanda pada sepotong teks yang memang tidak bermakna khusus. Contoh berikut memakai keduanya pada satu kartu promosi:

<div class="kartu-promo">
  <p>Diskon pembuka di Kedai Siti:</p>
  <p>Kopi tubruk cukup <span class="harga">Rp8.000</span> per cangkir.</p>
</div>

Mari kita telaah kode di atas:

1. Baris 1 (<div class="kartu-promo">): mengelompokkan dua paragraf menjadi satu kartu — selector CSS .kartu-promo menata latar dan pinggirnya; div dipakai karena tak ada elemen bermakna untuk “kartu”.
2. Baris 2-3 (<p>): isi tetap memakai elemen bermakna — paragraf tetap paragraf.
3. Baris 3 (<span class="harga">): menandai harga sebagai sasaran gaya (misalnya dicetak lebih besar) tanpa memutus kalimat; makna khusus memang tidak diperlukan di sini.

Kartu yang sama, kini dengan gaya kecil supaya wadahnya terlihat — lalu perhatikan dua perilaku berbeda: kotak div berdiri sebagai blok penuh lebar, sedangkan span berwarna menempel di dalam kalimat tanpa memutus alurnya:

Penyakit divitis #

divitis adalah kebiasaan membungkus semuanya dengan div: judul dibungkus div, paragraf dibungkus div, semuanya ditata lewat class. Markup berikut sah secara sintaks, tetapi miskin makna:

<div class="postingan">
  <div class="judul">Kopi Tubruk ala Siti</div>
  <div class="paragraf">Kopi tubruk adalah kopi paling sederhana: bubuk dan air mendidih.</div>
</div>

Perbaikannya memakai elemen semantik yang tugasnya memang tersedia:

<article>
  <h2>Kopi Tubruk ala Siti</h2>
  <p>Kopi tubruk adalah kopi paling sederhana: bubuk dan air mendidih.</p>
</article>

Perbedaan hasilnya nyata: h2 memasukkan judul ke dalam outline dokumen sehingga pembaca layar bisa melompat antarbagian; p menyatakan paragraf sungguhan; article menyatakan tulisan utuh. Versi div hanya menyediakan kotak tanpa satu pun janji tersebut — class judul dan paragraf hanya dibaca manusia yang kebetulan membuka berkas sumbernya.

Ringkasan #

• div dan span adalah wadah generik tanpa makna semantik.
• div berperilaku blok; span berperilaku inline.
• Keduanya dipakai untuk pengelompokan CSS dan hook skrip saat elemen semantik tidak tersedia.
• divitis mengganti elemen bermakna dengan div — perbaiki dengan article, heading, dan p.

Chapter berikutnya merangkum seluruh Section menjadi satu keterampilan: memilih elemen teks berdasarkan makna, bukan tampilan.