HTML Academy · Pelajaran

Daftar Deskripsi dl dt dd

Tandai pasangan istilah dan definisi dengan daftar deskripsi.

Daftar Deskripsi dl dt dd adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Apa Itu Daftar Deskripsi?

Daftar deskripsi mengelompokkan istilah bersama deskripsinya:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language — the structure of the web.</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets — the presentation of the web.</dd>

  <dt>JavaScript</dt>
  <dd>The programming language of the web.</dd>
</dl>

Elemen dl, dt, dan dd

Tiga elements membentuk daftar deskripsi:

<dl> — wadah daftar deskripsi
<dt> — istilah deskripsi (kunci)
<dd> — detail deskripsi (nilai)

Beberapa dd per dt

Satu istilah dapat memiliki beberapa deskripsi:

<dl>
  <dt>HTML</dt>
  <dd>Stands for HyperText Markup Language.</dd>
  <dd>First published as HTML 2.0 in 1995.</dd>
  <dd>Current version: HTML5 (Living Standard).</dd>
</dl>

Beberapa dt per dd

Beberapa istilah dapat menggunakan satu deskripsi bersama (sinonim, alias):

<dl>
  <dt>Username</dt>
  <dt>Login</dt>
  <dt>Handle</dt>
  <dd>The unique identifier used to log in to your account.</dd>
</dl>

Kasus Penggunaan di Dunia Nyata

Daftar deskripsi sangat cocok untuk:

Glosarium dan definisi
Bagian FAQ (pertanyaan → jawaban)
Metadata produk (Penulis: Jane, Diterbitkan: 2024)
Detail resep (Waktu persiapan: 10 menit, Porsi: 4)
Dokumentasi parameter API

FAQ dengan dl

Buat FAQ dengan daftar deskripsi:

<dl class="faq">
  <dt>Is HTML a programming language?</dt>
  <dd>No. HTML is a markup language. It defines structure and meaning, not logic or computation.</dd>

  <dt>Do I need to close void elements?</dt>
  <dd>In HTML5, void elements like &lt;img&gt; and &lt;br&gt; do not need a closing slash.</dd>
</dl>

dl untuk Metadata

Tampilkan metadata artikel atau produk:

<article>
  <h1>Responsive Images Guide</h1>

  <dl class="metadata">
    <dt>Author</dt>
    <dd>Jane Smith</dd>

    <dt>Published</dt>
    <dd><time datetime="2024-03-15">March 15, 2024</time></dd>

    <dt>Reading time</dt>
    <dd>8 minutes</dd>
  </dl>
</article>

Menata dl

Atur gaya daftar deskripsi dengan CSS:

/* Two-column layout */
dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
}

dt {
  font-weight: bold;
  color: #555;
}

dd {
  margin: 0;  /* Remove browser default dd margin */
}

Membuat dl Bersarang

Daftar deskripsi dapat dibuat bersarang untuk definisi hierarkis:

<dl>
  <dt>HTML Elements</dt>
  <dd>
    <dl>
      <dt>Block elements</dt>
      <dd>Take full width: div, p, h1-h6</dd>
      <dt>Inline elements</dt>
      <dd>Flow with text: span, a, strong</dd>
    </dl>
  </dd>
</dl>

dl vs table untuk Data Kunci-Nilai

Kapan menggunakan <dl> dibandingkan <table> untuk data kunci-nilai:

dl — hubungan antara istilah dan deskripsi (pasangan nama-nilai)
table — data tabular dengan baris dan kolom (beberapa atribut per item)

<dl>
  <dt>Name</dt><dd>Jane</dd>
  <dt>Role</dt><dd>Developer</dd>
</dl>
<!-- vs table for multiple users with same attributes -->

Div di dalam dl

Membungkus kelompok dt/dd dalam <div> di dalam <dl> merupakan HTML5 yang valid:

<dl>
  <div>
    <dt>HTML</dt>
    <dd>Markup language for web pages.</dd>
  </div>
  <div>
    <dt>CSS</dt>
    <dd>Styling language for web pages.</dd>
  </div>
</dl>
<!-- Useful for zebra-striping or grouping with CSS -->

Pemeriksaan Singkat

Elemen mana yang berisi definisi/nilai dalam daftar deskripsi?

Ringkasan: Daftar Deskripsi

Hal-hal penting tentang daftar deskripsi:

<dl> — wadah daftar deskripsi
<dt> — istilah (kunci, pertanyaan, nama)
<dd> — deskripsi (nilai, jawaban, definisi)
Satu dt dapat memiliki beberapa dd; beberapa dt dapat menggunakan satu dd bersama
Sangat cocok untuk glosarium, FAQ, dan metadata
Bungkus kelompok dalam <div> untuk fleksibilitas penataan gaya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Daftar Deskripsi dl dt dd” gratis?

Ya — teks lengkap “Daftar Deskripsi dl dt dd” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Daftar Deskripsi dl dt dd”?

Tandai pasangan istilah dan definisi dengan daftar deskripsi. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Daftar Deskripsi dl dt dd” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke HTML Academy