NEXARYN
NEXARYN

Published ยท Minggu, 27 April 2025

Penggunaan Tag Div dan Span untuk Layout

Pengenalan tentang Div dan Span

Dalam pengembangan web, tata letak (layout) adalah salah satu aspek terpenting untuk menciptakan pengalaman pengguna yang baik. Dalam HTML, tag <div> dan <span> adalah dua elemen yang sering digunakan untuk tujuan pengaturan tata letak dan penyusunan konten. Keduanya tidak memiliki tampilan visual secara default, tetapi sangat berguna saat digabungkan dengan CSS untuk menata dan mengatur elemen-elemen dalam halaman.

Meskipun keduanya sering digunakan untuk tujuan yang sama, ada perbedaan mendasar dalam cara mereka berfungsi. Mari kita bahas lebih lanjut.

Tag <div>: Kontainer Blok

Tag <div> adalah elemen blok-level yang sering digunakan untuk membungkus elemen lain, membentuk grup, atau membuat kontainer untuk elemen-elemen lain dalam halaman web. <div> digunakan untuk elemen yang ingin kita atur dalam baris atau kolom, seperti bagian header, footer, sidebar, atau konten utama dalam suatu halaman.


Penggunaan <div> untuk Layout

Elemen <div> digunakan untuk membuat struktur halaman web dengan mengelompokkan elemen-elemen lainnya. Ini sangat berguna ketika bekerja dengan CSS untuk memberikan desain responsif atau pengaturan layout yang lebih kompleks.

Contoh penggunaan tag <div>:

<div class="header">
  <h1>Selamat datang di Situs Kami</h1>
  <p>Ini adalah situs web contoh.</p>
</div>

<div class="main-content">
  <h2>Konten Utama</h2>
  <p>Berbagai artikel menarik dapat ditemukan di sini.</p>
</div>

<div class="footer">
  <p>&copy; 2025 Semua Hak Dilindungi.</p>
</div>

Pada contoh di atas, kita menggunakan tiga tag <div> untuk memisahkan header, konten utama, dan footer. Masing-masing elemen diberi kelas (class) untuk memudahkan penataan dengan CSS.


Tag <span>: Elemen Inline

Berbeda dengan <div>, tag <span> adalah elemen inline yang digunakan untuk membungkus bagian-bagian kecil dari teks atau elemen lain tanpa mempengaruhi layout keseluruhan halaman. Tag <span> biasanya digunakan untuk memberikan gaya tertentu pada bagian teks atau elemen tanpa membuatnya menjadi blok yang terpisah.


Penggunaan <span> dalam Layout

<span> sering digunakan untuk mengubah bagian tertentu dari teks atau elemen dalam elemen yang lebih besar, seperti memberi warna, font, atau ukuran teks yang berbeda. Namun, karena sifatnya yang inline, <span> tidak menyebabkan pemisahan baris atau membuat elemen baru seperti <div>.

Contoh penggunaan <span>:

<p>Ini adalah <span class="highlight">teks penting</span> yang perlu diperhatikan.</p>

Di atas, kita menggunakan tag <span> untuk memberi gaya berbeda pada kata "teks penting". Ini memungkinkan kita untuk menambahkan elemen inline dalam teks tanpa mengubah tata letak secara keseluruhan.  


Perbedaan Utama antara <div> dan <span>

Meskipun keduanya sering digunakan dalam pengembangan web, <div> dan <span> memiliki perbedaan mendasar dalam cara mereka bekerja:

  1. <div> adalah elemen blok-level, artinya akan menyebabkan pemisahan baris di sekitar elemen tersebut, dan biasanya digunakan untuk membungkus elemen lain dalam layout.

  2. <span> adalah elemen inline, yang tidak menyebabkan pemisahan baris dan digunakan untuk memberikan gaya pada bagian teks atau elemen kecil.


Menyambung ke Elemen HTML Selanjutnya: Komentar di HTML

Setelah mempelajari cara mengatur layout dengan tag <div> dan <span>, kita akan melanjutkan ke elemen komentar di HTML. Komentar memungkinkan kita untuk memberikan catatan di dalam kode, yang berguna untuk pengembangan dan pemeliharaan kode. Pada artikel berikutnya, kita akan membahas bagaimana menulis komentar yang baik dan benar dalam HTML, serta best practices dalam penggunaannya.