Tag div HTML: Pengertian, div class, Layout dan Styling

Fungsi tag div

<div> (singkatan dari division) adalah container umum. Div mengelompokkan elemen supaya kamu bisa memberi gaya, mengatur posisi, atau mengendalikannya dengan script sebagai satu kesatuan. Div sendiri tidak terlihat apa-apa: tanpa margin, tanpa border, tanpa font khusus. Div adalah elemen blok, jadi dimulai di baris baru dan membentang selebar ruang yang tersedia.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    div { border: 2px dashed #2563eb; padding: 8px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <div>
    <h2>A group</h2>
    <p>The dashed border shows the div around the heading and this paragraph.</p>
  </div>
  <div>A second div starts on a new line.</div>
</body>
</html>

Hapus baris border di style dan div-nya menjadi tidak terlihat: itulah tampilan default sebuah div. Semua efek visualnya berasal dari CSS.

div class dan id

Div biasanya diberi class, yaitu nama yang ditargetkan oleh CSS-mu. Div yang memakai class yang sama mendapat gaya yang sama:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div class</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; background: #f3f4f6; }
    .card { background: white; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; margin-bottom: 12px; }
    .card h3 { margin: 0 0 4px; }
    .card.highlight { border-color: #2563eb; box-shadow: 0 0 0 3px #bfdbfe; }
  </style>
</head>
<body>
  <div class="card">
    <h3>Basic</h3>
    <p>class="card"</p>
  </div>
  <div class="card highlight" id="pro">
    <h3>Pro</h3>
    <p>class="card highlight" and id="pro"</p>
  </div>
</body>
</html>

.card memberi gaya kedua kotak, .card.highlight menambahkan outline biru ke div yang punya kedua class itu. Pakai id saat kamu perlu menunjuk satu div tertentu, misalnya sebagai target link (href="#pro"). Halaman atribut membandingkan class dan id secara detail.

Div berdampingan

Karena div adalah blok, div bertumpuk secara vertikal. Untuk menaruhnya dalam satu baris, jadikan induknya flex container:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Divs side by side</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    .row { display: flex; gap: 12px; }
    .col { flex: 1; padding: 12px; border-radius: 8px; background: #e5e7eb; }
    .col.wide { flex: 2; background: #dbeafe; }
  </style>
</head>
<body>
  <div class="row">
    <div class="col">One</div>
    <div class="col wide">Two (twice as wide)</div>
    <div class="col">Three</div>
  </div>
</body>
</html>

display: flex di .row menjajarkan anak-anaknya, gap memberi jarak, dan nilai flex membagi lebarnya (1 : 2 : 1 di sini). Pola induk dan anak ini adalah penggunaan div yang paling umum di situs sungguhan. Untuk menengahkan div, lihat cara menengahkan div.

Div bersarang

Div bisa berisi div lain sedalam apa pun. Setiap level adalah kotak di dalam kotak, yang bisa kamu lihat dengan memberi setiap div border dan sedikit padding:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested divs</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div { border: 2px solid #2563eb; padding: 10px; }
    .page { background: #eff6ff; }
    .sidebar { background: #fef3c7; border-color: #f59e0b; }
    .content { background: white; margin-top: 8px; }
  </style>
</head>
<body>
  <div class="page">
    .page
    <div class="sidebar">.sidebar</div>
    <div class="content">
      .content
      <div>an inner div</div>
    </div>
  </div>
</body>
</html>

Buat susunan bersarang sedangkal yang dimungkinkan layout-nya. Setiap pembungkus tambahan adalah satu kotak lagi yang harus dipikirkan saat margin atau lebar tidak bekerja seperti yang kamu harapkan.

div atau tag semantik?

Div tidak mengatakan apa pun tentang isinya. HTML punya tag yang melakukan tugas pengelompokan yang sama sekaligus menyatakan kelompok apa itu:

Tag-tag ini terlihat persis seperti div sampai kamu memberinya gaya, tapi screen reader mengumumkannya dan membuat pengguna bisa melompat di antaranya, dan mesin pencari membaca strukturnya. Pakai div untuk kotak yang hanya ada demi layout atau styling, seperti pembungkus .row di atas. Halaman HTML semantik membahas semuanya.

Div bukan tombol

Div dengan handler klik terlihat bisa diklik oleh pengguna mouse, tapi pengguna keyboard tidak bisa mencapainya dengan Tab atau menekannya dengan Enter, dan screen reader tidak mengumumkannya sebagai tombol:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>div vs button</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .fake, button { display: inline-block; padding: 8px 14px; border-radius: 6px; border: 0; background: #2563eb; color: white; font: inherit; cursor: pointer; margin: 4px; }
  </style>
</head>
<body>
  <div class="fake" onclick="document.getElementById('out').textContent = 'div clicked'">div</div>
  <button onclick="document.getElementById('out').textContent = 'button clicked'">button</button>
  <p id="out">Click the preview, then press Tab: only the button gets focus.</p>
</body>
</html>

Pakai <button> untuk aksi dan <a href> untuk navigasi. Keduanya bisa difokus dan berfungsi dengan keyboard secara gratis.

Kesalahan umum

• Div di dalam <p>. Paragraf tertutup sebelum div. Jadikan div sebagai elemen luar, atau pakai <span> di dalam paragraf.
• Div soup. Halaman yang hanya terdiri dari div tidak punya struktur bagi screen reader. Ganti div dengan <header>, <nav>, <main> dan <footer> di tempat yang cocok.
• Div yang bisa diklik. Pakai <button> atau link.
• Berharap div selebar teksnya. Div mengambil lebar penuh. Pakai display: inline-block, width: fit-content, atau <span> kalau kamu ingin div menyusut.
• Memakai ulang id di beberapa div. Pakai class untuk apa pun yang berulang.