Fungsi div pada HTML adalah untuk mengelompokkan berbagai bagian website, agar lebih terstruktur. Di artikel ini, kamu akan belajar pengertian div pada HTML beserta kegunaannya. Selain itu, kamu juga akan mempraktekan bagaimana cara membuat div pada HTML, agar kamu bisa langsung menerapkannya.
Pengertian Div pada HTML
Div adalah singkatan dari division alias bagian. Sesuai dengan namanya, divisi berperan untuk mengelompokkan kode di dalam HTML menjadi beberapa bagian atau blok. Jika tidak ada divisi, maka seluruh bagian halaman akan tergabung menjadi satu, tanpa pemisah yang jelas.
Kalau kamu mengerjakan halaman web yang mengandung banyak elemen, maka kamu pasti membutuhkan divisi di dalam dokumen HTML. Tag pembuka untuk elemen divisi adalah <div> dan ditutup dengan </div>.
Fungsi Div pada HTML
Setelah memahami pengertian Div pada HTML, sekarang kita akan membahas fungsi Div pada HTML secara mendalam.
Fungsi utama divisi adalah untuk membagi kode HTML menjadi beberapa blok. Setiap blok kode memiliki fungsi yang berbeda-beda. Misalnya, blok “Siswa” untuk mengatur berbagai hal yang berhubungan dengan siswa. Kemudian blok “Nilai” untuk mengatur tentang nilai, dan lain sebagainya.
Kamu bebas mengatur pembagian blok sesuai keinginan kamu. Walaupun begitu, kamu tetap harus merencanakan setiap bagiannya dengan teliti. Perencanaan blok kode bertujuan agar kamu lebih mudah melakukan maintenance di kemudian hari.
Perlu kamu ketahui bahwa dalam pemrograman, setiap blok kode biasanya berpengaruh pada blok kode yang lain. Oleh sebab itu, kamu harus mengatur dokumen HTML ke dalam blok-blok yang rapi dan terencana. Sehingga, pada saat maintenance salah satu blok, kamu tidak akan merusak blok kode lainnya.
Secara lebih spesifik, terdapat dua fungsi div pada HTML, yaitu:
1. Menata Layout Web
Divisi sangat membantu dalam menata layout web. Kamu bisa mengelompokkan satu bagian halaman ke dalam satu div, agar lebih tertata. Misalnya, bagian header, body, dan footer kamu susun ke dalam masing-masing satu divisi. Dengan begitu, maka kamu bisa menulis kode untuk masing-masing divisi secara lebih fokus.
Kemudian, kamu bisa mengatur style untuk masing-masing divisi yang akan berlaku untuk semua elemen di dalam divisi tersebut. Dengan demikian, kamu tidak perlu menulis styling pada masing-masing elemen. Cukup dengan menuliskannya di divisi, maka semua elemen di dalamnya akan mengikuti style tersebut.
2. Membuat Desain dengan CSS
Jika kamu membutuhkan CSS untuk membuat desain tertentu, maka kamu perlu memasukkannya ke dalam sebuah divisi. Kolaborasi div dan CSS bisa kamu manfaatkan untuk membuat berbagai hal menarik di halaman HTML. Beberapa di antaranya, yaitu:
Membuat bentuk persegi
Membuat gambar lingkaran
Menggambar bendera negara
Karena kode CSS akan cukup panjang dan rumit, maka kamu perlu mengemasnya ke dalam divisi. Jadi, kamu bisa langsung mengetahui bahwa satu blok div tersebut adalah tempat kamu membuat desain CSS.
Contoh Penggunaan Div pada HTML
Sebuah dokumen HTML pasti memiliki elemen wajib yang terdiri dari tag <html>, <head>, dan <body>. Kamu harus memahami bagaimana cara menggunakan divisi di dalam dokumen HTML sesuai aturan penulisannya. Kekeliruan dalam penulisan akan mengakibatkan file tidak dapat dijalankan oleh browser.
Fungsi div pada HTML adalah untuk mengelompokkan blok kode. Contoh cara membuat div pada HTML, yaitu:
<html>
<head>
</head>
<body>
<div class="sampleDiv">
<h2>Heading di dalam div</h2>
<p>Teks paragraf di dalam div.</p>
</div>
</body>
</html>
Pada kode sederhana di atas, kamu bisa melihat sebuah dokumen HTML yang mengandung sebuah elemen divisi. Bagian <head> sengaja kita buat kosong, agar kamu tidak perlu memikirkan bagian lainnya. Sehingga, kamu cukup berfokus pada bagian <body>, dimana divisi berada.
Divisi yang kita buat di atas memiliki dua elemen di dalamnya, yaitu sebuah header (<h2>) dan sebuah paragraf (<p>). Kamu dapat melihat bagaimana kedua elemen tersebut diletakkan di posisi yang agak menjorok ke kanan. Teknik penulisan ini bertujuan agar blok kode lebih mudah dilacak dari <div> sampai </div>.
Cara Membuat Div pada HTML
HTML mempunyai cara penulisan yang khas, yaitu dengan menggunakan tag pembuka <> dan penutup </>. Dalam membuat divisi pun kamu harus mengikuti cara penulisan tersebut. Setiap divisi dalam dokumen HTML diawali dengan <div> dan ditutup dengan </div>.
Semua elemen di dalam blok divisi tersusun dengan indentasi. Pengertian indentasi adalah gaya penulisan yang menjorok ke kanan. Indentasi bertujuan agar pengelompokan blok kode terlihat lebih jelas. Sejalan dengan fungsi div pada HTML, yaitu untuk merapikan struktur kode.
Lakukan langkah-langkah di bawah ini untuk melakukan uji coba dengan kode yang kita buat di atas:
Blok kode di atas, klik kanan, lalu pilih Copy.
Buka text editor favorit kamu. Kamu bisa menggunakan text editor biasa seperti Notepad atau WordPad. Jika kamu ingin text editor yang lebih mudah dan handal, maka kamu bisa memakai text editor khusus pemrograman, misalnya:
Visual Studio Code
Sublime Text
Notepad++
Paste kode di atas ke text editor kamu.
Lakukan perubahan pada teks di bagian <h2> dan <p> sesuai dengan yang kamu inginkan.
Simpan file tersebut dengan ekstensi .html.
Buka file tersebut dengan web browser, agar kamu bisa memeriksa hasilnya. Beberapa browser yang mendukung div adalah:
Google Chrome
Microsoft Edge
Mozilla Firefox
Safari
Opera
Jika kamu melakukan langkah-langkah di atas dengan benar, maka kamu akan melihat sebuah halaman web yang terdiri dari sebuah header dan paragraf. Teks di kedua bagian tersebut dapat kamu tulis di antara <h2></h2> dan <p></p>. Kamu juga bisa menambahkan lebih banyak <p></p>, agar teks menjadi lebih panjang.
Memahami Div Class dan Div Id
Karena fungsi div pada HTML adalah untuk mengelompokkan elemen, maka kita mungkin perlu membuat beberapa divisi dalam satu dokumen. Pertanyaannya, bagaimana cara kita membedakan antara divisi yang satu dengan divisi lainnya? Jawabannya adalah dengan div class dan div id.
Class dan id adalah dua atribut yang bisa kamu tambahkan ke dalam divisi. Fungsi dari kedua atribut tersebut adalah sebagai nama bagi sebuah div. Dengan menamai divisi, maka kamu bisa dengan mudah membedakan antara divisi satu dengan yang lain.
Walaupun fungsinya sama, namun id memiliki tingkatan yang lebih tinggi daripada class. Di dalam satu div id, kamu bisa menambahkan beberapa div class sebagai bagian dari id tersebut. Jika id adalah kategori, maka class adalah subkategori. Contohnya seperti berikut ini:
<div id=”ruang_tamu”>
<div class=”televisi”>Televisi</div>
<div class=”sofa”>Sofa</div>
<div class=”meja”>Meja</div>
</div>
<div id=”kamar_mandi”>
<div class=”shower”>Shower</div>
<div class=”bathtub”>Bathtub</div>
<div class=”wastafel”>Wastafel<div>
</div>
Pada contoh di atas, kamu bisa melihat bagaimana dua buah divisi berada dalam satu dokumen HTML yang sama. Walaupun begitu, kamu bisa dengan mudah mengenali masing-masing divisi, karena terdapat id dan class yang unik. Seperti itulah implementasi fungsi div pada HTML.
Jika suatu hari kamu perlu melakukan modifikasi pada class meja, maka kamu bisa langsung menemukannya tanpa harus menganalisis isi konten setiap divisi. Cara ini bertujuan agar programmer bisa bekerja dengan lebih mudah dan cepat. Selain itu, id dan class juga penting untuk integrasi antar blok kode.
Selain class dan id, div juga mendukung kelompok atribut HTML global dan atribut HTML event. Pelajari dan cobalah atribut-atribut tersebut, agar kamu semakin mahir dalam menggunakan divisi. Jangan lupa untuk membuat lebih banyak divisi, agar kamu terbiasa mengerjakan banyak blok kode di dalam satu dokumen HTML.
Sudah Siap Menggunakan Div pada HTML?
Sampai di sini, kamu sudah memahami pengertian div pada HTML, fungsi div pada HTML, dan cara membuat div pada HTML. Cobalah untuk membuat sebuah dokumen HTML dengan beberapa divisi di dalamnya. Setelah itu, kamu bisa melakukan styling pada div tersebut dengan menggunakan CSS. Selamat mencoba!
Posting Komentar untuk "Fungsi Div pada HTML, Pengertian, dan Cara Menggunakannya"