عرض مصدر HTML/dl

<noinclude>{{DISPLAYTITLE:العنصر <code><dl></code>}}</noinclude>
يُمثِّل العنصر <code><nowiki><dl></nowiki></code> قائمة وصف (description list)، وهذا العنصر يتضمن مجموعةً من المصطلحات وشرحها. يستخدم هذا العنصر عادةً في القواميس أو شرح المصطلحات، أو لعرض البيانات الوصفية (قائمة من أزواج «مفاتيح-قيم»).
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" | تصنيفات المحتوى
| لا يوجد.
|-
! scope="row" | المحتوى المسموح
| مجموعة أو أكثر من عناصر <code>[[HTML/dt|<nowiki><dt></nowiki>]]</code> متبوعة بعنصر [[HTML/dd|<nowiki><dd></nowiki>]] واحد أو أكثر؛ ويُسمَح باستخدام العنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> فيه.
|-
! scope="row" | الوسم المختصر
| لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
|-
! scope="row" | العناصر الأب
| أي عنصر يقبل المحتوى التنظيمي.
|-
! scope="row" | واجهة DOM
| <code>HTMLDListElement</code>
|}

== دعم المتصفحات ==
{| class="wikitable" style="width: 50%;"
 !| Chrome
 ! Firefox
 ! Edge
 ! Safari
 ! Opera
|-
|مدعوم
|مدعوم
|مدعوم
|مدعوم
|مدعوم
|}
== الخاصيات ==
يمكن استخدام [[HTML/Global Attributes|الخاصيات العامة]] في هذا العنصر.

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

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

== أمثلة ==

=== مصطلح وحيد وشرحٌ عنه ===
هذا مثالٌ عن قائمة وصف فيها مصطلح وحيد وشرحٌ عنه:<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

=== عدِّة مصطلحات وشرحٌ وحيدٌ عنها ===
هذا مثالٌ عن قائمة وصف فيها عدِّة مصطلحات وشرحٌ وحيدٌ عنها:<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

=== مصطلحٌ وحيد وأكثر من شرح عنه ===
هذا مثالٌ عن قائمة وصف فيها مصطلحٌ وحيد وأكثر من شرح عنه:<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

=== أكثر من مصطلح ويرتبط بكل مصطلح شرحٌ خاصٌ ===
هذا مثالٌ عن قائمة وصف فيها أكثر من مصطلح ويرتبط بكل مصطلح شرحٌ خاصٌ به:<syntaxhighlight lang="html">
<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>
</syntaxhighlight>قد تستفيد أحيانًا من تعريف فاصل بين المصطلح وشرحه، وذلك عبر CSS، مثلًا:<syntaxhighlight lang="css">
dt::after {
  content: ": ";
}
</syntaxhighlight>

=== وضع كل مصطلح وشرحه ضمن عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code> ===
أما هذا المثال فهو عن قائمة الوصف السابقة لكن مع وضع كل مصطلح وشرحه ضمن عنصر <code>[[HTML/div|<nowiki><div></nowiki>]]</code>:<syntaxhighlight lang="html">
<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>
</syntaxhighlight>
==مصادر ومواصفات==
*معيار [https://html.spec.whatwg.org/multipage/semantics.html#the-dl-element HTML Living Standard].
*مواصفة [http://www.w3.org/TR/html5/grouping-content.html#the-dl-element HTML5].
*مواصفة [http://www.w3.org/TR/html401/struct/lists.html#h-10.3 HTML 4.01].
[[تصنيف:HTML|{{SUBPAGENAME}}]]
[[تصنيف:HTML Elements|{{SUBPAGENAME}}]]
[[تصنيف:Text Content|{{SUBPAGENAME}}]]