DIV PADA HTML

Untuk memberi hiasan atau aksi tertentu ke beberapa elemen sekaligus, kita bisa mengelompokkan beberapa elemen HTML menjadi satu dengan tag div.

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

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

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.