HTML div tag | belajar <div> element

HTML Fadlullah Fadul December 3, 2018

Referensi Belajar HTML div tag. Tutorial dan panduan mengenai element <div>...</div> yang digunakan untuk menampung beberapa element menjadi satu kelompok. Mencakup pembahasan lebih detail dan lengkap yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <div>.

Deskripsi
Penjelasan HTML div tag

div menunjukkan division (divisi atau bagian), yaitu generik blok konten yang dapat digunakan sebagai kontainer (penampung) untuk meng-group beberapa elemen menjadi satu.

HTML <div> element dapat dijadikan "wadah" untuk menempatkan beberapa elemen menjadi satu bagian, yang penggunaannya ditujukan untuk mempermudah aplikasi style dengan CSS dan perlakuan khusus lainnya yang kemudian dapat diberi atribut class, id, title dan lain sebagainya.

HTML <div> element tidak memiliki arti khusus atau lebih dikenal dengan elemen yang tidak memiliki arti semantik (semantic meaning).

Attributes
Atribut HTML Tag <div>

Pada HTML5 <div> tidak memiliki attribute khusus yang dapat digunakan, sedangkan didalam HTML 4.01 terdapat attribute align yang dapat digunakan untuk meluruskan teks, attribute ini sudah usang dan tidak dipakai lagi didalam HTML5, sehingga tidak dibahas disini.

Global Attributes
Atribut Secara Global (Keseluruhan)

<div> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Silahkan, lihat referensi mengenai HTML Global Attribute

Event Attributes
Atribut event (Peristiwa)

<div> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Silahkan, lihat referensi mengenai HTML Events Attribute

Example
Contoh HTML <div> element

Contoh 1

Contoh HTML <div> dengan atribut id

HTML 
<div id="content">
  <p>konten di dalam div</p>
</div>
Contoh 2

Perhatikan contoh dua elements div berikut:

HTML 
<div class="text-danger">
  <p>WASPADALAH!</p>
</div>

<div>
  <p>Teks di dalam div</p>
</div>

<div> pertama (baris 1-3) contoh diatas, memiliki attribute class text-danger, sedangkan <div> kedua (5-7) tidak memiliki class. Selanjutnya, kita bisa memberi style CSS khusus untuk div pertama (yang memiliki class="text-danger") seperti berikut:

CSS 
div.text-danger {
color: red;
}

Didalam CSS, class attribute dilambangkan dengan tanda titik (.) dan kode CSS diatas, dapat diterjemahkan seperti ini: "div yang memiliki class yaitu text-danger, berwarna (color) merah (red).

Hasilnya, div pertama memiliki teks berwarna merah, sedangkan div kedua tidak.

Lihat hasilnya dan edit sendiri kode diatas pada demo editor di bawah ini:

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
editor 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML div tag</title>
    <style>
      div.text-danger {
        color: red;
      }
    </style>
  </head>
  <body>
    <h3>Contoh 1</h3>
    <div id="content">
      <p>konten di dalam div</p>
    </div>

    <hr />
    <h3>Contoh 2</h3>
    <div class="text-danger">
      <p>WASPADALAH!</p>
    </div>

    <div>
      <p>Teks di dalam div</p>
    </div>

  </body>
</html>
SHARE
Previous Article Next Article