يُمثِّل العنصر <dl>
قائمة وصف (description list)، وهذا العنصر يتضمن مجموعةً من المصطلحات وشرحها. يستخدم هذا العنصر عادةً في القواميس أو شرح المصطلحات، أو لعرض البيانات الوصفية (قائمة من أزواج «مفاتيح-قيم»).
تصنيفات المحتوى | لا يوجد. |
---|---|
المحتوى المسموح | مجموعة أو أكثر من عناصر <dt> متبوعة بعنصر <dd> واحد أو أكثر؛ ويُسمَح باستخدام العنصر <div> فيه. |
الوسم المختصر | لا يمكن حذف أيّ من وسمَي البداية أو النهاية. |
العناصر الأب | أي عنصر يقبل المحتوى التنظيمي. |
واجهة DOM | HTMLDListElement |
Chrome | Firefox | Edge | Safari | Opera |
---|---|---|---|---|
مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
يمكن استخدام الخاصيات العامة في هذا العنصر.
لا تستعمل هذا العنصر (ولا عنصر <ul>
) لمحاذاة بعض عناصر الصفحة، وعلى الرغم من أنَّ ذلك قابل للتطبيق، لكن لا ينصح بذلك وسيؤدي ذلك إلى فقدان معنى هذا العنصر.
لتغيير محاذاة محتوى عنصر <dl>
فاستخدم خاصية margin
في CSS.
هذا مثالٌ عن قائمة وصف فيها مصطلح وحيد وشرحٌ عنه:
<dl>
<dt>الموسوعة التقنية</dt>
<dd>
تهدف الموسوعة التقنية بتقديم أهم الشروحات والأخبار التقنية وأخبار الألعاب عبر موقعنا ومواقع التواصل
الإجتماعي عالم التقنية والإبداع الربح الإلكتروني
</dd>
<!-- تعاريف أخرى -->
</dl>
هذا مثالٌ عن قائمة وصف فيها عدِّة مصطلحات وشرحٌ وحيدٌ عنها:
<dl>
<dt>الموسوعة التقنية</dt>
<dt>coreiten</dt>
<dd>
تهدف الموسوعة التقنية لتوفير توثيق عربي كامل وعالي الجودة، مدعّم بالأمثلة لمختلف لغات البرمجة
وتقنيات
تطوير الويب والجوال.
</dd>
<!-- تعاريف أخرى -->
</dl>
هذا مثالٌ عن قائمة وصف فيها مصطلحٌ وحيد وأكثر من شرح عنه:
<dl>
<dt>القهوة</dt>
<dd>مشروب ساخن أسود</dd>
<dt>الحليب</dt>
<dd>مشروب بارد أبيض</dd>
<dt>اليانسون</dt>
<dd>مشروب ساخن أخضر</dd>
<!-- تعاريف أخرى -->
</dl>
قد تستفيد أحيانًا من تعريف فاصل بين المصطلح وشرحه، وذلك عبر CSS، مثلًا:
dt::after {
content: ": ";
}
<div>
أما هذا المثال فهو عن قائمة الوصف السابقة لكن مع وضع كل مصطلح وشرحه ضمن عنصر <div>
:
<dl>
<div>
<dt>القهوة</dt>
<dd>مشروب ساخن أسود</dd>
</div>
<div>
<dt>الحليب</dt>
<dd>مشروب بارد أبيض</dd>
</div>
<div>
<dt>اليانسون</dt>
<dd>مشروب ساخن أخضر</dd>
</div>
<!-- تعاريف أخرى -->
</dl>
تعرض أغلبية المتصفحات العنصر <dl>
مع ضبط الخاصية display
إلى block
، والهوامش العلوية (margin-top
) والسفلية (margin-bottom
) إلى 1em
، والهامش اليساري (margin-left
) واليميني (margin-right
) إلى 0
:
dl {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}