Dalam penerapannya pada bahasa program, div adalah sebuah elemen yang memiliki peran penting sebagai tag yang mengelompokan divisi tertentu dalam bahasa program HTML.
Selain untuk membatasi divisi, div HTML adalah elemen yang juga akan membatasi akhir klasifikasi tertentu sesuai dengan fungsi penggunaanya dalam bahasa program. Lantas, apa pengertian dari elemen ini dalam HTML? Lalu, apa fungsi div pada HTML? Mari simiak artikel ini sampai habis!
Apa itu Div?
Division atau div adalah sebuah tag HTML yang berfungsi mendeskripsikan bagian atau divisi tertentu yang sifatnya fleksibel. Artinya, penempatan tag ini dapat Anda gunakan sesuai dengan kebutuhan program.
Contohnya, untuk mengelompokan kategori tertentu dalam program HTML sesuai dengan fungsinya masing-masing.
Selain itu, tag ini juga tidak mempunyai makna apapun, seperti tag ‘p’ yang berfungsi sebagai penanda paragraf atau h1 sebagai heading. Akan tetapi, division adalah tag yang sering digunakan, khususnya untuk menentukan struktur website.
Fungsi DIV pada HTML
Setelah mengetahui pengertiannya, berikut adalah beberapa fungsi utama tag div dalam bahasa program HTML:
1. Mengelompokan Elemen
Fungsi pertama dari tag division ini, yaitu sebagai tag yang mengelompokan elemen tertentu dalam HTML sesuai dengan fungsi dan cara kerjanya masing-masing. Sebagai contoh, fungsi div pada HTML adalah untuk mengelompokan ID, Class, serta elemen lain berdasarkan fungsinya.
Pengelompokan ini bertujuan untuk menentukan elemen tertentu dalam program HTML dan menampilkannya pada hasil program sesuai dengan fungsi kerja dari masing-masing elemen tersebut.
Selain itu, pengelompokan elemen ini juga bertujuan untuk mempermudah proses edit program ketika terjadi error di bagian tertentu.
2. Memanipulasi Elemen
Div HTML adalah tag yang bersifat multifungsi. Artinya, Anda dapat menggunakan tag ini sesuai dengan kebutuhan dalam program.
Karena alasan tersebutlah mengapa division mampu memanipulasi tag lain hingga membentuk elemen baru yang sedemikian rupa. Contohnya, untuk mengubah tag div menjadi textarea, text field, button, dan lain-lain.
Kemudian, Anda juga dapat mengubah tag manipulasi tersebut menjadi efek tertentu dalam CSS dan hasil program. Misalnya saja seperti bentuk lingkaran, persegi, oval, segitiga, dan lain sebagainya. Selain itu, Anda juga bisa mengubah tag ini menjadi slide image, slide menu, slide text, dan lain-lain.
3. Tag Pengganti Fungsi Table
Fungsi div pada HTML ketiga adalah sebagai tag yang mampu menggantikan fungsi table dalam bahasa HTML. Jadi, layout pada halaman web yang biasa Anda buat dengan elemen table akan digantikan menggunakan tag division ini.
Selain untuk mengganti fungsi table, tag division ini juga akan memperpendek jumlah penggunaan bahasa program. Kemudian, penerapan tag ini juga akan membuat proses coding jadi lebih sederhana.
Hal ini juga akan sangat bermanfaat bagi para programmer, terutama untuk mempermudah dan mempercepat proses pembuatan struktur program website dengan bahasa HTML.
Contoh Penggunaan Div
Tag ini ditulis dengan menggunakan pembuka <div> lalu ditutup dengan tag </div>. Kemudian, untuk contoh penerapannya, Anda bisa menggabungkan beberapa elemen di dalam tag division tersebut. Berikut adalah contoh penerapan tag div yang dapat Anda hubungkan dengan style CSS pada judul website:
<html>
<head>
<title> Belajar menggunakan tag div </title>
</head>
<body>
<div style="color:blue;font-size:20px">
<h3>Makinrajin.com</h3>
<p>
Selamat datang di tutorial Makinrajin
</p>
<p>
Belajar
</p>
</div>
</body>
</html>
Maka, hasil yang akan tampil sebagai berikut:
“Makinrajin.com”
Selamat datang di tutorial Makinrajin
Belajar
Contoh Penggunaan Div dengan Elemen Class
Penggunaan class bisa Anda gunakan lebih dari satu kali. Selain itu, Anda juga bisa memisahkan nama class tersebut dengan spasi. Contohnya sebagai berikut:
<div class="class3 class4"></div>Nama class yang sama, maka akan mengalami proses perubahan oleh style css yang Anda berikan pada class tersebut. Berikut contoh penerapannya:
<html>
<head>
<title> Belajar </title>
<style>
.item {
color: red;
}
</style>
</head>
<body>
<div class="header">
Menu
</div>
<div class="body">
Konten
<div class="item">
1
</div>
<div class="item">
2
</div>
<div class="item">
3
</div>
<div class="item">
4
</div>
</div>
<div class="footer">
berisi copyright website
</div>
</body>
</html>Jika angka dalam nama class item Anda ubah menjadi warna merah, maka oleh style CSS class nomor 1, 2, 3, 4 akan ikut berubah. Perubahan tersebut akan sama seperti elemen warna yang Anda masukan pada class sebelumnya. Jadi, hasil penerapan div yang akan tampil adalah:
Belajar
Menu
1
2
3
4
Contoh Penggunaan Div dengan Elemen Id
Id mempunyai fungsi khusus pada browser yang tidak ada sama sekali pada fungsi class. Selain itu, Anda dapat menggunakan div id serta div class dalam satu elemen HTML. Misalnya untuk menentukan tabel komen pada HTML. Berikut contoh penerapannya:
<li id="komen-1" class="item"></li>
<li id="komen-2" class="item"></li>
<li id="komen-3" class="item"></li>Sebagai informasi tambahan, nama id tidak boleh memiliki kesamaan, karena dalam sebuah halaman web hanya boleh memiliki satu nama id saja. Sedangkan untuk class, Anda bisa memberikan variabel dengan nama yang sama dan dalam jumlah yang tidak terbatas.
Sudah Paham Tentang Apa itu Div pada HTML?
Sekian pembahasan kali ini tentang Division pada HTML beserta fungsi dan contoh penerapannya. Intinya, div adalah sebuah tag pembatas yang mengelompokan elemen tertentu sesuai fungsi dan klasifikasinya pada HTML. Selain itu, tag ini juga bisa memanipulasi elemen dan merubahnya menjadi elemen baru dalam style CSS.
I’m an experienced SEO Specialist who can grow a website through organic channel. I’m also passionate about digital marketing and web development