HTML/dl

يُمثِّل العنصر <dl> قائمة وصف (description list)، وهذا العنصر يتضمن مجموعةً من المصطلحات وشرحها. يستخدم هذا العنصر عادةً في القواميس أو شرح المصطلحات، أو لعرض البيانات الوصفية (قائمة من أزواج «مفاتيح-قيم»).

تصنيفات المحتوى	لا يوجد.
المحتوى المسموح	مجموعة أو أكثر من عناصر <dt> متبوعة بعنصر <dd> واحد أو أكثر؛ ويُسمَح باستخدام العنصر <div> فيه.
الوسم المختصر	لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب	أي عنصر يقبل المحتوى التنظيمي.
واجهة DOM	HTMLDListElement

دعم المتصفحات

Chrome	Firefox	Edge	Safari	Opera
مدعوم	مدعوم	مدعوم	مدعوم	مدعوم

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

ملاحظات

لا تستعمل هذا العنصر (ولا عنصر <ul>) لمحاذاة بعض عناصر الصفحة، وعلى الرغم من أنَّ ذلك قابل للتطبيق، لكن لا ينصح بذلك وسيؤدي ذلك إلى فقدان معنى هذا العنصر.

لتغيير محاذاة محتوى عنصر <dl> فاستخدم خاصية margin في CSS.

أمثلة

مصطلح وحيد وشرحٌ عنه

هذا مثالٌ عن قائمة وصف فيها مصطلح وحيد وشرحٌ عنه:

<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform,
    graphical web browser developed by the
    Mozilla Corporation and hundreds of
    volunteers.
  </dd>

  <!-- Other terms and descriptions -->
</dl>

عدِّة مصطلحات وشرحٌ وحيدٌ عنها

هذا مثالٌ عن قائمة وصف فيها عدِّة مصطلحات وشرحٌ وحيدٌ عنها:

<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>
    A free, open source, cross-platform,
    graphical web browser developed by the
    Mozilla Corporation and hundreds of
    volunteers.
  </dd>

  <!-- Other terms and descriptions -->
</dl>

مصطلحٌ وحيد وأكثر من شرح عنه

هذا مثالٌ عن قائمة وصف فيها مصطلحٌ وحيد وأكثر من شرح عنه:

<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform,
    graphical web browser developed by the
    Mozilla Corporation and hundreds of
    volunteers.
  </dd>
  <dd>
    The Red Panda also known as the Lesser
    Panda, Wah, Bear Cat or Firefox, is a
    mostly herbivorous mammal, slightly larger
    than a domestic cat (60 cm long).
  </dd>

  <!-- Other terms and descriptions -->
</dl>

أكثر من مصطلح ويرتبط بكل مصطلح شرحٌ خاصٌ

هذا مثالٌ عن قائمة وصف فيها أكثر من مصطلح ويرتبط بكل مصطلح شرحٌ خاصٌ به:

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
  <dt>Iced Coffee</dt>
  <dd>Black cold drink</dd>

  <!-- Other terms and descriptions -->
</dl>

قد تستفيد أحيانًا من تعريف فاصل بين المصطلح وشرحه، وذلك عبر CSS، مثلًا:

dt::after {
  content: ": ";
}

وضع كل مصطلح وشرحه ضمن عنصر <div>

أما هذا المثال فهو عن قائمة الوصف السابقة لكن مع وضع كل مصطلح وشرحه ضمن عنصر <div>:

<dl>
  <div>
     <dt>Coffee</dt>
     <dd>Black hot drink</dd>
  </div>
  <div>
     <dt>Milk</dt>
     <dd>White cold drink</dd>
  </div>
  <div>
     <dt>Iced Coffee</dt>
     <dd>Black cold drink</dd>
  </div>

  <!-- Other terms and descriptions -->
</dl>

مصادر ومواصفات

• معيار HTML Living Standard.
• مواصفة HTML5.
• مواصفة HTML 4.01.