Penggunaan DIV pada HTML

Berikut adalah contoh penggunaan elemen <div> pada HTML

<div>
  <h1>Judul Halaman</h1>
  <p>Ini adalah paragraf pertama.</p>
  <p>Ini adalah paragraf kedua.</p>
</div>

Dalam contoh di atas, kita menggunakan elemen <div> untuk mengelompokkan beberapa elemen HTML menjadi satu blok. Elemen <div> tidak memiliki arti khusus, tetapi digunakan sebagai wadah umum untuk mengelompokkan elemen-elemen lainnya.

Kita dapat memberikan atribut id atau class pada elemen <div> untuk memberikan identitas atau gaya tertentu. Berikut adalah contoh penggunaan atribut id dan class pada elemen <div>

<div id="header">
  <h1>Judul Halaman</h1>
</div>

<div class="content">
  <p>Ini adalah paragraf pertama.</p>
  <p>Ini adalah paragraf kedua.</p>
</div>

Output:

See the Pen Untitled by De Orchids (@De-Orchids) on CodePen.

Dalam contoh di atas, elemen <div> dengan atribut id="header" digunakan untuk mengelompokkan elemen-elemen yang terkait dengan header halaman. Sedangkan elemen <div> dengan atribut class="content" digunakan untuk mengelompokkan elemen-elemen yang terkait dengan konten halaman.

Penggunaan elemen <div> dalam HTML sangat fleksibel dan dapat disesuaikan dengan kebutuhan desain dan struktur halaman web. Dengan menggunakan elemen <div> dengan bijak, kita dapat mengatur tata letak dan mengelompokkan elemen-elemen HTML dengan lebih efisien.

Silakan mencoba contoh-contoh di atas dan eksplorasi lebih lanjut penggunaan elemen <div> dalam HTML untuk memahami lebih lanjut tentang fungsionalitas dan fleksibilitasnya.