Warning: curl_init() has been disabled for security reasons in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 95

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 97

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 98

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 100

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 103

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 106

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 333

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 334

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 363

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 370

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 375

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 376

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 377

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 379

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 382

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 150

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 151

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 159

Warning: curl_exec() has been disabled for security reasons in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 162

Warning: curl_errno() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 167

Warning: curl_errno() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 167

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 181

Warning: curl_setopt() expects parameter 1 to be resource, null given in /home/gusdiinf/public_html/wp-includes/Requests/Transport/cURL.php on line 182
Pengertian Div pada HTML | Gusdwi.info

Pengertian Div pada HTML

Kalau kita perhatikan source Code sebuah website saat ini, Tag HTML yang paling banyak ditemukan adalah tag div. Masih Banyak orang yang belum mengetahui secara jelas tentang fungsi tag div, Saya sendiri sulit mengartikan secara jelas dalam bahasa indonesia tentang div walaupun saya paham cara membuat dan meletakan tag div tersebut. Mungkin saja setiap orang akan mempunyai pengertian yang berbeda tentang div namun saya yakin maksudnya sama.

Setelah saya Browsing di beberapa website yang berhubungan dengan div, saya dapat menyimpulkan bahwa tag div yang dimaksud adalah singkatan dari Division yang berarti sebuah Tag HTML untuk membuat suatu seksi atau kelompok tertentu dengan tujuan mengelompokan sebuah file HTML menjadi beberapa bagian sesuai dengan tempatnya agar mempermudah para web developer memberi style pada setiap bagiannya. Misalnya, sebuah halaman Web yang terdiri dari 4 bagian: Header,Side Bar, Content dan Footer. Untuk mengelompokannya kita dapat menggunakan tag div. Contoh:

Kalau kita lihat pada Browser kode HTML diatas akan menjadi seperti ini:

Header
Side Bar
Content
Footer
Untuk membedakan masing masing bagian, kita harus memberi Style pada setiap tag div dengan CSS. Contoh:

Hasil yang terlihat pada browser akan menjadi seperti ini:

HEADER
SIDEBAR
CONTENT
FOOTER

Membuat Layout Web dengan Div.
Tag div juga dapat berfungsi untuk menggantikan fungsi Table. Maksudnya, layout halaman web dengan Table adalah cara kuno yang mulai ditinggalkan dan sebagai penggantinya adalah dengan menggunakan tag div. Alasannya adalah:

  1. Kode HTML menjadi lebih pendek daripada menggunakan Table.
  2. Ukuran File menjadi lebih kecil.
  3. Lebih Fleksibel karena tidak dibatasi oleh baris dan Kolom.
  4. Lebih competible pada semua browser saat ini.

Jadi, jika anda ingin membuat layout halaman web tanpa Table gunakanlah cara yang seperti saya contohkan diatas.

Didalam tag div kita juga bisa meletakan tag div lagi, dan elemen HTML yang lainnya seperti gambar, animasi atau video.

10 thoughts on “Pengertian Div pada HTML

  1. owhh begitu toh mas..kebetulan saya mau membuat web dengan basis table sebagai layout nya…tp setelah ada penjelasannya saya jadi mengerti…kalo ada,tolong dimuat juga mas,tutorial mengenai fungsi tag div secara lengkap..trimakasih..

  2. Mantap banget,, ternata div tag itu kerangka yg punya fungsi sama kek tabel yahl,, nice info gan,, trima kasih banyak..

  3. saya mencoba membuat tag div ini di wapsite, mang berhasil, tapi yg jadi masalah, kadang kadang text/karakter keluar dari tampilan tag div, 1 lagi tampilan div sidebar dengan div content tidak bisa sejajar.. Apa ada solusi??

Tinggalkan Balasan ke wisnu Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *