Fungsi Div pada HTML dan Contoh Penggunaannya

Ilustrasi HTML. Foto: RoonZ nl/unsplash

Masih banyak orang mengetahui tentang fungsi div pada HTML. Padahal, penting bagi programmer jika ingin membuat situs website dengan mengetahui fungsi div.

Membuat website memang membutuhkan ilmu yang memadai dan memahami bahasa pemrograman. Salah satu bahasa markup yang sering digunakan adalah HTML yang terdiri dari kombinasi antara teks dan simbol.

HTML menjadi komponen penting dalam pembuatan situs web. Dalam membuat file HTML, terdapat beberapa tag dan elemen yang sering digunakan para developer, seperti div.

Jika kamu ingin belajar HTML lebih dalam, maka perlu memahami fungsi div class pada HTML yang sering digunakan untuk membuat website. Simak selengkapnya berikut ini.

Fungsi div pada HTML

Ilustrasi div pada HTML. Foto: Pankaj Patel/Unsplash

Sebelum memahami tentang fungsi kode div pada HTML, alangkah baiknya untuk memahami pengertian dari salah satu tag tersebut.

Mengutip laman Developer Mozilla, div (division) merupakan elemen HTML bertanda <div> yang menjadi wadah umum atau penampung untuk konten pada website.

Penggunaan div ditujukan untuk memudahkan aplikasi bergaya dengan CSS dan memperlakukan secara khusus yang nantinya dapat diberi Class, ID, Title, dan sebagainya.

Biasanya, fungsi tag div pada HTML digunakan untuk mengelompokkan elemen atau bermacam-macam tag agar menjadi suatu grup. Tag div ini juga sering digunakan untuk mendefinisikan ID atau Class dari CSS.

Salah satu fungsi div pada HTML lainnya yang sering digunakan oleh para developer adalah untuk membatasi bagian satu dengan bagian yang lain. Div juga dianggap sebagai tag multifungsi yang bisa digunakan sesuai dengan kebutuhan.

Penggunaan div pada HTML

Ilustrasi fungsi div pada HTML. Foto: Moritz Kindler/unsplash

Kapan waktu yang tepat untuk menggunakan div pada HTML? Sebenarnya, penggunaan tag ini sangat fleksibel. Sehingga, developer bisa menggunakannya dalam kondisi apa pun.

Misalnya, saat membagi halaman situs web menjadi beberapa bagian yang nantinya akan membuat tampilan lokasi header, footer, main, dan side menjadi tampak. Tak hanya itu, bisa juga menambahkan tag lain di dalamnya.

Biasanya, tag yang digunakan untuk menampilkan sebuah link, gambar, teks, dan sebagainya. Jika ingin menambah animasi seperti gambar bergerak memutar, vertikal, dan sebagainya, maka bisa memadukannya dengan CSS dan Javascript.

Contoh Penggunaan div pada HTML

Ilustrasi contoh penggunaan div pada HTML. Foto: Nick Karvounis/Unsplash

Setelah memahami teori hingga fungsi div pada HTML yang nantinya digunakan untuk website, kini saatnya mempelajari contoh penggunaannya dalam pembuatan website, seperti berikut ini.

Penggunaan <div> pertama pada baris pertama hingga ketiga, seperti contoh yang tertera di atas, memiliki attribute class text-danger, sedangkan <div> kedua pada baris kelima hingga ketujuh, tidak memiliki class.

Jika diberi style CSS khusus untuk div pertama (yang memiliki class="text-danger"), maka hasilnya seperti berikut:

Demikian penjelasan fungsi div pada HTML yang sering digunakan pada pembuatan situs website.

(SAN)