Tutorial HTML / Kapan menggunakan div dan span?

div dan span mengelompokkan konten tanpa memberikan makna khusus padanya. Gunakan mereka ketika CSS atau JavaScript memerlukan target dan tidak ada elemen HTML yang lebih spesifik yang mendeskripsikan konten. div biasanya mengelompokkan bagian yang lebih besar; span mengelompokkan bagian dari sebuah kalimat.

Apa perbedaan antara div dan span?

Sebuah div dapat berisi konten mengalir seperti paragraf, daftar, atau seluruh kartu. Sebuah span dimaksudkan untuk teks dan konten frasa (phrasing content) di dalam bagian teks. Keduanya tidak menunjukkan bahwa isinya adalah judul, tombol, atau sangat penting. Secara default, div dimulai sebagai blok dan span tetap inline, tetapi CSS dapat mengubah tampilannya. Pilih berdasarkan struktur konten, bukan hanya berdasarkan tampilannya. Untuk area dengan peran halaman, pertama pilih elemen semantik yang sesuai di Menyusun halaman dengan elemen semantik.

Jangan menempatkan paragraf atau div di dalam span. Jika satu-satunya tujuan Anda adalah pemecahan baris, tentukan terlebih dahulu apakah Anda memerlukan paragraf baru atau perubahan tata letak CSS daripada kontainer lain.

Kelompokkan hanya apa yang perlu diberi gaya

Tempatkan HTML ini di body dari suatu dokumen dan CSS di style di head-nya.

<div class="product-card">
  <h2>Cangkir Perjalanan</h2>
  <p>Harga: <span class="price">15 $</span></p>
</div>

.product-card {
  padding: 16px;
  border: 1px solid #dadada;
}

.price {
  color: #075cb4;
  font-weight: 700;
}

Seluruh kartu mendapatkan bingkai, sementara hanya harga yang berubah warna dan ketebalannya. Atribut class memberikan nama untuk dipilih oleh CSS. Bahkan tanpa CSS, nama produk tetap menjadi judul dan harga tetap dalam paragraf. Jika harga tidak berwarna biru, periksa apakah class="price" dalam HTML sesuai dengan .price dalam CSS. Titik menunjukkan pemilih kelas; itu bukan bagian dari nama kelas HTML.

Utamakan elemen dengan makna yang sesuai

Untuk navigasi utama, pilih nav daripada div yang generik. Untuk artikel independen, pertimbangkan article. Untuk suatu aksi yang dapat dilakukan pengguna, gunakan button, alih-alih membuat span yang dapat diklik. Elemen asli yang tepat sudah menyampaikan makna dan sering kali menawarkan perilaku keyboard. Jenis tombol yang berbeda dijelaskan oleh postingan Formulir dengan textarea, select, option, dan button .

Harga dalam contoh ini tidak memerlukan pemrosesan data khusus, oleh karena itu span sudah cukup. Anda dapat mempertahankan kelas CSS dan sekaligus mengganti elemennya nanti dengan elemen yang lebih bermakna. Lihat daftar elemen HTML dari MDN saat memilih elemen yang sesuai.

Pisahkan konten yang diizinkan dari tampilan CSS

Konten mengalir adalah kategori yang digunakan untuk aliran konten halaman, termasuk paragraf, daftar, dan bagian. Konten frasa digunakan dalam bagian teks, seperti teks, penekanan, tautan, dan gambar. div mengelompokkan konten mengalir; span mengelompokkan konten frasa. Kategori ini berbeda dari aturan CSS untuk penempatan baris.

<!-- Tidak sesuai: sebuah paragraf dalam span -->
<span class="card"><p>Deskripsi Produk</p></span>

<!-- Sebuah kontainer yang boleh berisi paragraf -->
<div class="card"><p>Deskripsi Produk</p></div>

Menulis span { display: block; } tidak menghasilkan paragraf yang valid di dalam span. Bandingkan fragmen secara terpisah dan lalu pertahankan kelas CSS yang sama pada kontainer yang telah diperbaiki. Pilih elemen dari model konten, daripada hanya mengubah tag untuk menyembunyikan masalah visual.

Referensi untuk span di MDN · Referensi untuk div di MDN

Kesalahan yang sering terjadi

Jangan bangun setiap bagian halaman hanya dengan div untuk mempermudah penataan layout. Sebaliknya, jangan berikan kontainer elemen semantik yang maknanya tidak sesuai. span yang sudah didesain tidak otomatis menjadi judul atau tombol hanya karena terlihat seperti itu. Mulailah dengan konten dan interaksi, dan tambahkan kontainer generik hanya di tempat yang diperlukan.