MulaiCode
HTML

HTML Div

Pelajari cara menggunakan elemen <div> untuk mengelompokkan konten dalam HTML.

Elemen <div> di HTML

Elemen <div> adalah kontainer umum yang digunakan untuk mengelompokkan elemen HTML dan menerapkan CSS atau JavaScript padanya.


Penggunaan Dasar <div>

Elemen ini tidak memiliki tampilan khusus secara default, tetapi sangat berguna untuk styling dan layout.

<div>
  <h2>Judul dalam Div</h2>
  <p>Ini adalah paragraf di dalam elemen div.</p>
</div>

Styling Elemen <div>

Biasanya <div> digunakan bersama CSS untuk memberikan tampilan visual.

<style>
  .kotak {
    background-color: lightblue;
    padding: 20px;
    border: 1px solid blue;
  }
</style>
 
<div class="kotak">
  <p>Konten dalam kotak berwarna biru muda.</p>
</div>

Nesting (Bersarang) Elemen <div>

Kamu bisa menyusun <div> di dalam <div> lain untuk layout yang kompleks.

<div style="background-color: lightgray; padding: 10px;">
  <div style="background-color: white; padding: 10px;">
    <p>Ini adalah div di dalam div lain.</p>
  </div>
</div>

Tips

  • Gunakan <div> untuk layout atau grup elemen.
  • Gunakan dengan CSS class agar mudah dikelola.
  • Jangan berlebihan menggunakan <div> (divitis).

On this page