Pengertian Element div pada HTML

 Element <div> pada HTML merupakan tempat/wadah (container) generik yang digunakan untuk mengelompokan element-element html supaya lebih mudah diatur untuk digunaka menggunakan CSS ataupun JavaScript.

Perbedaan antara element-element lain seperti <header>, <footer> dan lainnya yang memiliki makna simantik. element <div> ini tidak memiliki arti khusus  dan fungsinya hanyalah sebagai pembungkus (container). ilustrasi sederhana untuk element <div> ini adala membayangkan kita memiliki sebuah kotak penyimpanan yang mana kotak tersebut tidak menentukan isi didalam nya, kita bisa mengisi kotak tersebut dengan buku, pakaiann, atau barang-barang apapun. dan tujuan kotak tersebut hanyalah agar tersusun rapi. sama halnya dengan element <div>. dan dalam html seperti contoh :

<div>

    <h1>Latihan html</h1>

    <p>ini adalah sebuah website</p>

</div>

pada contoh diatas element <div> membungkus element <h1> dan element <p> agar keduanya menjadi suatu kelompok.

Fungsi Element <div>

Ada beberapa fungsi element <div> didalam html, salah satunya adalah mengelompokan element html.seperti contoh berikut :

<div>

    <h2>profil</h2>

    <p>nama: ricads</p>

    <p>usia: 25 tahun</p>

</div>

pada contoh diatas terlihat bahwa semua informasii profil berada didalam satu wadah.

fungsi lainnya adalah mempermudah pemberian CSS, misalkan ingin memberi warna pada latar belakang pada halaman web, seperti contoh :

<div class="profil">

    <h1>Profil</h1>

    <p>ini adalah sebuah website</p>

</div>

dan pada file CSS :

.profil {

    background-color: ligthblue;

    padding: 20px;

}

jika kita melihat hasil dari kode diatas maka hasil nya akan terlihat seluruh isi didalam <div> akan memiliki latar belakang berwarna biru.

Selain mempermudah pemberian CSS, element <div> juga dapat mempermudah JavaScript, pada contoh berikut ini JavaScript dapat mengambil satu <div> lalu mengubah seluruh isinya :

<div id="pesan">
    
    hallo world

</div>

Pada file JavaScript:

dicument.getElementById("pesan").innerHTML = "Selamat Belajar HTML";

 selain itu element <div> juga bisa membuat layout website, sebelum hadirnya HTML5, hampir seluruh struktur website dibuat menggunakan element <div>. seperti contoh :

<div c;ass="header">

    Header

</div>

<div class="menu">

    Menu

</div>

<div class="content">

    Isi Artikel

</div>

<div class="footer">

    Footer

</div>

namun sekarang umumnya diganti dengan element semantik seperti <header>, <nav>, <main>, dan <footer>, akan tetapi element <div> tetap digunakan untuk kebutuhan pengelompokan.

Kapan Menggunakan Elelment <div>

Element <div> digunakan ketika kita ingin mengelompokan beberapa element menjadi satu bagian, selain itu digunakan ketika kita membutuhkan target CSS untuk mengatur tampilan. dan juga jika kita membutuhkan targer JavaScript untuk memanipulasi element. seperti contoh berikut ini:

<div class="card">
    
    <img src="produk.png" alt="Produk">

    <h3>Laptop Gaming</h3>

    <p>Harga Rp 12.000.000</p>

</div>

Pada contoh diatas, element <div> berfungsi sebagai wadah untuk sebuah kartu produk.

Ada beberapa hal yang sebaik nya tidak menggunakan element <div> jika sudah tersedia  element semantik yang lebih sesuai, seperti pada bagian kepala gunakan element <header>, menu navigasi kita dapat menggunakan element <nav>, dan pada konten utama kita bisa menggunakan element <main>, pada bagian artikel kita bisa menggunakan element <article>, pada bagian dalam artikel kita bisa menggunkan element <section>, untuk informasi tambahan kita bisa menggunakan element <aside>, begitu juga dengan bagian bawah kita bisa menggunakan element <footer>.

Praktek terbaik dalam penggunaan element <div> adalah dengan menggunakan class atau id pada element <div> agar mudah diatur dengan CSS dan JavaScript, hindari membuat terlalu banyak <div> yang tidak perlu karna dapat membuat struktur html sulit dibaca. utamakan element semantik jika memang sesuai dengan fungsinya dan juga gunakan <div> sebagai wadah ketika tidak ada element html lain yang lebih tepat.

Element <div> adalah container serbaguna dalam html yang digunakan untuk mengelompokan eleement lain tanpa memberi makna semantik. fungsi element <div> ini sangat penting dalam membangun tata letak halaman pada sebuah website.

Subscribe to receive free email updates: