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.

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.

Example
Contoh HTML <div> element

Contoh 1

Contoh HTML <div> dengan atribut id

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

Perhatikan contoh dua elements div berikut:

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

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
Demo dengan Source Code Editor

Demo Editor
Demo HTML <div>
Code Editor