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:

<div>Header</div> <div>Side Bar</div> <div>Content</div> <div>Footer</div>

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:

<html>
<head>
<title>pengertian div tag</title>
<style type=”text/css”>
div.header {
border: 1px solid #000000;
margin: 0.03em;
background: #ffffff;
height: 30px;
font-size: 2em; text-align: center;}

div.sidebar {
border: 1px solid #330000;
margin: 0.03em;
background: #ffffff;
float: left;
width: 38%;
height: 100px;
font-size: 2em;
text-align: center;}

div.content {
border: 1px solid #330000;
margin: 0.03em;
background: #ffffff;
float: right;
width: 60%; height:
100px; font-size: 2em;
text-align: center;}

div.footer {
border: 1px solid #000000;
margin: 0.03em;
background: #ffffff;
clear: both;
height: 30px;
font-size: 2em;
text-align: center;}
</style>
</head>
<body>
<div class=”header”>Header</div>
<div class=”sidebar”>Side Bar</div>
<div class=”content”>Content</div>
<div class=”footer”>Footer</div>
</body>
</html>

Hasil yang terlihat pada browser akan menjadi seperti ini:

Header
Side Bar
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.

9 comments for “Pengertian Div pada HTML

  1. rama
    30 April 2010 at 02:24

    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. 25 Mei 2010 at 10:25

    mantap gan…terima kasih, salam D3pd 🙂

  3. Fauzi
    20 Juli 2010 at 14:48

    Nice Knowladge bro,, thank’s banget . . . .

  4. callmedevilz
    9 September 2010 at 10:19

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

  5. roy
    12 September 2010 at 02:46

    GAK BISA GAN

    hslnya cm :

    Header
    Side Bar
    Content
    Footer

  6. 11 Oktober 2010 at 07:56

    infonya bagus, keep posting bro

  7. 27 Desember 2010 at 11:46

    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??

    • Gusdwi
      28 Desember 2010 at 09:30

      Tentukan width dari div tersebut, jangan membuat width didalam text/karakter melebihi width dari div tersebut.
      dan Ingat: didalam tag DIV kita bisa membuat tag DIV Lagi. jadi usahakan sebelum membuat text/karakter, kurung dulu dengan tag Div.
      anda bisa lihat disini:http://gusdwi.info/membuat-kolom-paragraf-dengan-css-3.html
      semoga bisa membantu…

  8. 28 Desember 2010 at 14:46

    Thx ats bantuannya, kini sya sda bsa membuat tampilan web dengan div di wap hosting.. Kreasi sya sendiri, tampa copy paste code template org, nie hasilnya html klo ini kode cssnya.

Tinggalkan Balasan

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