0Pricing
HTML Academy · Ders

Açıklama Listeleri: dl, dt ve dd

Terim-tanım çiftlerini açıklama listeleriyle işaretlemeyi öğrenin.

Açıklama Listeleri: dl, dt ve dd, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

Açıklama Listesi Nedir

Açıklama listesi, terimleri açıklamalarıyla gruplandırır:

<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>

dl, dt ve dd Elements

Bir açıklama listesini üç element oluşturur:

  • <dl> — açıklama listesi kapsayıcısı
  • <dt> — açıklama terimi (anahtar)
  • <dd> — açıklama ayrıntıları (değer)

dt Başına Birden Fazla dd

Bir terimin birden fazla açıklaması olabilir:

<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>

dd Başına Birden Fazla dt

Birden fazla terim tek bir açıklamayı paylaşabilir (eş anlamlılar, diğer adlar):

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

Gerçek Dünya Kullanım Alanları

Açıklama listeleri şu amaçlar için idealdir:

  • Sözlükler ve tanımlar
  • FAQ bölümleri (soru → yanıt)
  • Ürün üst verileri (Yazar: Jane, Yayımlanma: 2024)
  • Tarif ayrıntıları (Hazırlama süresi: 10 dk, Porsiyon: 4)
  • API parametresi belgeleri

dl ile FAQ

Açıklama listeleriyle bir FAQ oluşturun:

<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>

Üst Veriler için dl

Makale veya ürün üst verilerini görüntüleyin:

<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>

dl Biçimlendirme

Açıklama listelerini CSS ile biçimlendirin:

/* 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 */
}

dl İç İçe Yerleştirme

Açıklama listeleri hiyerarşik tanımlar için iç içe yerleştirilebilir:

<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>

Anahtar-Değer için dl ve table

Anahtar-değer verileri için <dl> ve <table> ne zaman kullanılır:

  • dl — terimler ve açıklamalar arasındaki ilişkiler (ad-değer çiftleri)
  • table — satır ve sütunlardan oluşan tablo verileri (öğe başına birden fazla öznitelik)
<dl>
  <dt>Name</dt><dd>Jane</dd>
  <dt>Role</dt><dd>Developer</dd>
</dl>
<!-- vs table for multiple users with same attributes -->

dl İçinde Div'ler

dt/dd gruplarını <dl> içinde <div> ile sarmalamak HTML5 için geçerlidir:

<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 -->

Hızlı Kontrol

Açıklama listesindeki tanımı/değeri hangi öğe içerir?

Özet: Açıklama Listeleri

Açıklama listelerinin temel özellikleri:

  • <dl> — açıklama listesi kapsayıcısı
  • <dt> — terim (anahtar, soru, ad)
  • <dd> — açıklama (değer, yanıt, tanım)
  • Bir dt birden fazla dd içerebilir; birden fazla dt tek bir dd'yi paylaşabilir
  • Sözlükler, FAQ'lar ve üst veriler için idealdir
  • Biçimlendirme esnekliği için grupları <div> ile sarın

Sıkça Sorulan Sorular

“Açıklama Listeleri: dl, dt ve dd” dersi ücretsiz mi?

Evet — “Açıklama Listeleri: dl, dt ve dd” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“Açıklama Listeleri: dl, dt ve dd” dersinde ne öğreneceğim?

Terim-tanım çiftlerini açıklama listeleriyle işaretlemeyi öğrenin. HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Açıklama Listeleri: dl, dt ve dd” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Sırasız Listeler: ul ve li
  2. Sıralı Listeler: ol, start, reversed ve type
  3. Açıklama Listeleri: dl, dt ve dd
  4. İç İçe Listeler ve Liste Biçimlendirme
← HTML Academy Sayfasına Dön