DIV pada HTML
DIV bisa digunakan untuk mengelompokkan beberapa elemen HTML menjadi satu. Secara visual DIV tidak ada bedanya
Untuk memberi hiasan atau aksi tertentu ke beberapa elemen sekaligus, kita bisa mengelompokkan beberapa elemen HTML menjadi satu dengan tag div
.
😲 Info sampingan
Untuk mudah mengingat, `div` diambil dari kata `division` dalam bahasa inggris atau pembagi.Di mana div berperan sebagai pembagi beberapa elemen.
Contoh penggunaan DIV
Di sini saya akan membagi dua div. Kamu bisa menggunakan berapapun div yang kamu mau/butuhkan.
<div>
<p>Paragraf pertama</p>
<p>Masih kelompok pertama</p>
</div>
<div>
<p>Paragraf kedua</p>
<p>Sudah kelompok kedua</p>
</div>
Hasilnya
Paragraf pertama
Masih kelompok pertama
Paragraf kedua
Sudah kelompok kedua
Tidak ada perubahan tampilan
Seperti yang kamu lihat, tidak ada perbedaan secara tampilan, ketika menggunakan DIV. Namun setelah nanti kamu mempelajari CSS atau Javascript, barulah terlihat kegunaan DIV itu sendiri.
Contoh:
<div style="background:orange;">
<p>Paragraf pertama</p>
<p>Masih kelompok pertama</p>
</div>
<div style="background:green;">
<p>Paragraf kedua</p>
<p>Sudah kelompok kedua</p>
</div>
Hasilnya
Paragraf pertama
Masih kelompok pertama
Paragraf kedua
Sudah kelompok kedua
Di sini saya memberi hiasan (CSS), dua warna background yang berbeda di setiap div
nya.
Kenapa tidak menggunakan tag lain
Sebuah tag bisa dibungkus di tag lain, lalu kenapa tidak mengelompokkan dengan tag lain?
Alasannya, karena tag lain sudah punya sifat atau makna tersendiri. Seperti tag <p>
yang akan memberi jarak dan punya kegunaan sebagai paragraf.
Sementara <div>
adalah tag non-semantic yang ia sendiri tidak bermakna apa-apa.
😲 Info sampingan
Div adalah tag yang bersifat `block` alias akan hadir di baris berikutnya.