DIV dan SPAN dalam HTML

Hai Semua, Selamat datang kembali. Jadi artikel kali ini adalah tentang tag div dan span di html. Pada dua artikel sebelumnya, kita sudah mempelajari berbagai hal tentang tag html. Sekarang adalah saatnya untuk tag html yang mungkin bisa disebut paling sering digunakan untuk mendesain tampilan. Untuk saat ini, kita hanya akan membicarakan tentang dua tag tersebut, div dan span.

Artikel ini adalah bagian dari Pelatihan Pengembangan Web

Div dan Span ini sebagian besar digunakan pada merapikan tampilan website, dan dipadukan dengan css. Tanpa penggunaan CSS, div dan span ini hampir tidak terlihat pengaruhnya. Tapi saya hanya ingin memperkenalkan tag ini sekarang karena saya akan menunjukkan kepada Anda hal-hal yang menggunakan div dan rentang. Dalam artikel-artikel berikutnya, mungkin tag ini akan selalu kita pakai karena erat kaitannya dengan pengaturan tampilan website.

DIV

Baik, Jadi mari kita mulai berbicara tentang div dan span. Hal pertama yang akan saya katakan adalah bahwa keduanya seperti yang saya sebutkan tidak begitu berguna sampai kita benar-benar menggunakannya untuk menata elemen. Apa yang tag ini lakukan adalah memungkinkan anda untuk mengumpulkan konten bersama sehingga menjadi sebuah wadah. Jadi ini hanya cara mengelompokkan hal-hal menjadi satu wadah, agar mudah dalam penerapan style atau gayanya. Sebagai contoh,adalah dalam pembuatan halaman utama website dengan dua kolom. Website jaman dahulu menggunakan table untuk membuat dua kolom ini. Tapi semenjak ada CSS di website modern, kolom lebih banyak menggunakan sebuah div. Bagaimana caranya? Seperti yang saya katakan di atas, div hanyalah sebuah wadah. Jadi, misal kita ingin membuat dua kolom di website, maka kita butuh dua wadah. Wadah yang satu kita letakan di kiri dengan lebar 70% dan wadah yang satunya kita letakan di samping kanannya dengan width 30%. Tinggal kita masukan saja item-item nya didalam wadah, bisa berupa, teks, paragraf, gambar, list, atau apapun itu. Secara default div ini akan memblok baris, namun bisa diganti dalam css. Contoh penggunaan div,

<div class="article">
 <img src="img.png">
 <p>Hahaha ini paragraf</p>
 <button>Tombol OK?</button>
</div>

SPAN

Lalu bagaimana dengan span? Span juga sama saja hanya sebuah wadah, bedanya kalau div ini memblok baris, span tidak. Span bisa ikut dalam sebuah paragraf tanpa ada linebreak. Dann contoh penggunaan span adalah dibawah ini.

<p>Hahaha ini paragraf loh, tapi judulnya <span class="judul">Judulnya apa ya?</span>. Seperti itulah</p>

About: totop275


One thought on “DIV dan SPAN dalam HTML”

Leave a Reply

Your email address will not be published. Required fields are marked *