Pengertian Div pada HTML

|

Kalau kita perhatikan source Code sebuah website saat ini, Tag HTML yang paling banyak ditemukan adalah tagdiv. 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 dariDivision 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 divdengan 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.

8 komentar:

  1. numpang tanya mas bro kalo boleh aku tau kira-kira bisa tidak tag div diletakkan di tengah-tengah tag body? trima kasih

    BalasHapus
  2. mas mau nanya, kalo ada tulisan div#related post itu maksud nya apa? soal nya related post di blog ane gak ada. www.tellingstories.ga thanks anyway

    BalasHapus
  3. mas mau nanya, kalo ada tulisan div#related post itu maksud nya apa? soal nya related post di blog ane gak ada. www.tellingstories.ga thanks anyway

    BalasHapus
  4. Fungsi tag div 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, trus dalam artikel ini disertakan contoh agar lebih jelas. Terimakasih ya.
    Website saya https://sriseptiarini.mahasiswa.atmaluhur.ac.id
    Website kampus http://www.atmaluhur.ac.id

    BalasHapus

Next Prev
▲Top▲