Tutorial HTML: Div dan Span

HTML hanyalah berisi perintah-perintah yang terstruktur dimana perintah-perintah tersebut terdiri atas tag-tag penyusun. Menyusun tag-tag HTML untuk membangun sebuah halaman web berarti kita telah melakukan suatu tindakan pemrograman walaupun HTML itu sendiri bukanlah suatu bahasa pemrograman. Menuliskan tag-tag HTML tidak sebatas hanya memasukkan perintah-perintah tertentu ke dalam dokumen HTML agar dokumen tersebut dapat terbaca dan ditampilkan oleh browser.

Namun, membangun sebuah halaman web dengan cara menyusun tag-tag HTML sedemikian rupa merupakan suatu karya seni tersendiri. Bagaimana kita memberikan sebuah arti, memberikan sebuah makna dan tujuan dari setiap baris perintah yang kita tulis. Bagaimana kita menerapkan/mengaplikasikan apa yang kita inginkan, apa yang kita maksud ke dalam sebuah dokumen/file HTML. Seperti misalnya menggunakan tag p untuk menunjukkan bahwa konten yang kita maksud adalah sebuah paragraf dan menggunakan tag h1 (heading 1) untuk menunjukkan suatu konten yang berada di dalamnya adalah sebuah judul dari konten yang kita tulis.

Artikel kali ini kita akan membahas tentang tag span dan tag div. Berbeda dengan tag p dan tag h1 yang tadi telah disebutkan, tag span dan tag div memiliki cakupan yang lebih luas. Untuk itu tag span dan tag div lebih sering bekerja sama dengan CSS untuk mengatur suatu konten yang berada di dalamnya atau berada dalam kekuasaannya.

Span dan div ini digunakan untuk mengelompokkan atau sebagai wadah bagi tag-tag HTML yang berada di dalamnya dan memberikan sebuah label dimana fungsi label ini berisi informasi yang digunakan untuk menangani/mengatur tag-tag HTML di dalamnya, label yang dimaksud adalah atribut class dan id. Atribut class dan id ini nantinya yang akan digunakan untuk mengkaitkan/menghubungkan dengan selektor class maupun id dalam CSS.

Perbedaan dari span dan div

Elemen span bersifat in-line atau biasa digunakan untuk menangani suatu konten berskala kecil yang berada dalam sebuah baris misal dalam paragraf. Sedangkan elemen div (division) bersifat block-line dan digunakan untuk mengelompokkan kumpulan-kumpulan HTML/konten berskala besar. Untuk lebih jelasnya kita lihat contoh berikut:

<div id="gelas">
  <p>Minum dulu biar <span class="air">segar</span> lagi</p>
  <p>Minum <span class="air">susu</span> lebih oye...</p>
</div>

Sebenarnya span tidak harus sering sering digunakan terutama bila ada alternatif tag lain yang lebih pas dan masuk akal. Misalnya kita ingin membuat penekanan pada kata "segar" dan untuk membuatnya lebih berkelas, di class air kita atur dengan italic sebagai penekanan visual dan dengan demikian konten akan lebih bermakna. Berikut adalah contohnya:

<div id="gelas">
  <p>Minum dulu biar <span class="air">segar</span> lagi</p>
</div>

Bila masih bingung dengan class dan id, tenang... Kita akan membahasnya nanti dalam bab CSS. Yang terpenting adalah kita memahami dulu tentang span dan div ini.

***

Daftar Tutorial HTML:

1. Tutorial HTML: Div dan Span