Div adalah salah satu tag yang memiliki banyak fungsi. Karena memiliki karakter yang fleksibel, aspek ini cocok untuk kamu gunakan pada berbagai macam kondisi.

Walaupun fungsi div pada HTML yang sebenarnya adalah mengelompokkan beberapa unit elemen jadi satu individu yang berdiri sendiri. Namun, tahukah kamu? Kenapa div menjadi salah satu tag yang pasti ada dalam sebuah halaman web?

Sekilas Tentang Div (Division)

Pada dasarnya, div HTML adalah sebuah tag yang memungkinkan penggunanya menggabungkan beberapa elemen, menjadi satu kesatuan yang berdiri secara independen. Tag ini juga memungkinkan kamu mengembangkan web dengan banyak section sekaligus.

Tag seperti ini akan sangat sering kamu temukan pada web berbentuk one page, karena dapat memisahkan section satu dengan lain. Artinya, kamu bisa membuat beberapa fungsi halaman dalam satu page saja.

Dalam prakteknya, kamu akan butuh lebih dari 4 halaman untuk menampilkan menu a, b, c dan d. Namun dengan div sebagai wadahnya, satu halaman akan lebih dari cukup. Mudahnya, kamu bisa mengasumsikan div sebagai sebuah meja yang bisa kamu letakkan berbagai menu makanan yang berbeda-beda.

Jadi, dalam asumsi tersebut, kamu bisa mengartikan div adalah aspek HTML yang bisa menjadi wadah bagi beberapa elemen HTML yang dapat kamu kelompokkan. Sehingga, memungkinkan kamu membentuk sebuah halaman dengan banyak divisi atau section, yang punya fungsi yang berbeda-beda.

Struktur Div Dalam HTML

Karena div adalah wadah untuk menampung gabungan elemen menjadi sebuah section independen, maka sudah jelas penempatannya paling efektif adalah di dalam tag body.

Sama halnya dengan struktur tag lainnya, div memiliki struktur utama, yaitu tag pembuka “<div>” dan juga tag penutup “</div>”. Sedangkan elemen yang ingin kamu gabung menjadi satu section bisa kamu tempatkan di dalam tag tersebut.

Secara teori penulisan tag div adalah seperti berikut:

<div> + section + </div>

Section tersebut bisa mencerminkan satu fungsi web secara utuh maupun beberapa bagian yang punya fungsi independen. Misalnya, dalam web ada 3 menu, yaitu portofolio, testimonial, dan juga kontak. Maka, kamu bisa kelompokkan menjadi 3 section yang berdiri sendiri-sendiri.

Jika kamu terapkan kira-kira akan seperti ini:

<div class="header"> Ceritanya Website Portofolio </div>
<div class="menu">
<a href="">Portfolio</a>
<a href="">Testimonial Ca</a>
<a href="">Kontak</a>
</div>

Fungsi Div Pada HTML

Sebenarnya pada penjasan tersebut beberapa kali sudah tersirat mengenai beberapa fungsi dari tag division ini. Namun, agar lebih mudah memahaminya, kamu bisa melihat fungsi div pada HTML melalui ulasan di bawah ini:

• Wadah beberapa elemen yang punya fungsi sama. Jadi, pengelompokan ini akan memudahkan developer untuk mengembangkan setiap section secara terpisah.
• Memudahkan pengembang untuk menerapkan CSS pada kelompok elemen atau section tertentu.
• Pelacakan error atau bug bisa lebih mudah terdeteksi. Karena tampilan error atau bug sudah terpisah antara satu section dan lainnya.
• Menjadi pembatas bagi sebuah fungsi, bagian, atau section yang punya otoritas yang berbeda-beda.
• Membantu pengembang dalam pemrosesan maupun identifikasi ID dan juga sebuah class yang terhubung antara section dengan CSS library.
• Membuat tampilan coding lebih tertata dan juga clean.

Sudah Siap Menerapkan Div?

Dari penjelasan tersebut, dapat kamu simpulkan bahwa div adalah salah satu tag yang fleksibel dan mampu menggabungkan berbagai elemen dalam satu halaman web. Penempatannya bisa kamu letakkan di dalam tag body. Berfungsi sebagai wadah bagi beragam elemen dengan fungsi sama hingga membuat tampilan coding lebih rapi.