Tanda <div> HTML

  • Halaman Sebelumnya <dir>
  • Halaman Berikutnya <dl>

Definisi dan penggunaan

<div> Label mendefinisikan pemisahan atau bagian (divisi/section) dalam dokumen HTML.

<div> Label dapat memisahkan dokumen menjadi bagian yang terpisah dan berbeda. Ini dapat digunakan sebagai alat organisasi yang ketat tanpa menghubungkan format apapun.

Dapat menempatkan berbagai jenis konten. <div> dalam tag!<div> tag dapat digunakan sebagai wadah elemen HTML, kemudian gaya CSS dapat disetel atau dioperasikan dengan JavaScript.

jika id atau class digunakan untuk menandai <div>jika class atau id Atribut, dapat dengan mudah <div> dengan setting gaya untuk tag.

Perhatian:Secara default, peramban selalu <div> dengan menempatkan tanda paragraf di depan dan belakang elemen.

Penggunaan

<div> Adalah elemen blok. Ini artinya kontennya secara otomatis mulai baris baru. Secara faktual, paragraf adalah <div> dapat melalui <div> yang class atau id menambah gaya ekstra.

Tidak perlu untuk setiap <div> wajah format yang asli.

Dapat ditambahkan kelas atau id untuk <div> Aplikasi elemen class atau id Atribut, tetapi kasus yang paling sering terjadi adalah hanya menerapkan salah satu. Perbedaan utama antara keduanya adalah, class digunakan untuk grup elemen (elemen yang mirip, atau dapat disebut elemen kelas), sedangkan id digunakan untuk mengidentifikasi elemen yang unik.

Lihat pula:

Panduan HTML:Elemen Blok dan Elemen Baris HTML

Panduan HTML:Pemebangan HTML

Panduan Referensi HTML DOM:Objek Div

Contoh

Bagian <div> yang menggunakan setting gaya CSS di dalam dokumen:

<html>
<head>
<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;
  text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
  <h2>Ini adalah judul di dalam elemen div</h2>
  <p>Ini adalah teks di dalam elemen div.</p>
</div>
</body>
</html>

Coba Sendiri

Kasus Analisis

<body>
 <h1>Website Baru</h1>
  <p>Beberapa teks. Beberapa teks. Beberapa teks...</p>
  ...
 <div class="news">
  <h2>Berita Utama 1</h2>
  <p>Beberapa teks. Beberapa teks. Beberapa teks...</p>
  ...
</div>
 <div class="news">
  <h2>Berita Utama 2</h2>
  <p>Beberapa teks. Beberapa teks. Beberapa teks...</p>
  ...
 </div>
 ...
</body>

Pengertian contoh

Seperti yang Anda lihat, bagian HTML di atas meniru struktur situs berita. Tiap div menggabungkan judul dan ringkasan berita masing-masing, yang artinya, div menambah struktur tambahan bagi dokumen. Selain itu, karena div ini termasuk dalam elemen yang sama, maka dapat digunakan class="news" untuk mengidentifikasi div ini, hal ini tidak hanya menambah semantik yang sesuai bagi div, tetapi juga memudahkan untuk menerapkan gaya format untuk div, yang dapat disebut sebagai dua hal dalam satu langkah.

Peringatan:Untuk belajar lebih mendalam tentang penggunaan class dan id, silakan baca bab 'Struktur Markering W3school' di bagian 'div, id, dan pendukung lainnya'.

Atribut Global

<div> Tanda ini juga mendukung Atribut Global di HTML.

Atribut Acara

<div> Tanda ini juga mendukung Atribut Acara di HTML.

Pengaturan CSS Default

Sebagian besar peramban akan menampilkan nilai default berikut ini <div> Elemen:

div {
  display: block;
}

Coba Sendiri

Dukungan Browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan
  • Halaman Sebelumnya <dir>
  • Halaman Berikutnya <dl>