تعريفه
نستخدم الوسم <dl>
لعرض قائمة وصف في الصفحة.
لإضافة العناصر في هذه القائمة نستخدم الوسمين <dt>
و <dd>
على النحو التالي.
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
..
</dl>
<dl> </dl>
هو الوسم الأساسي الذي يجب أن تضعه لإعلام المتصفح أنك تريد عرض البيانات بداخل قائمة وصف.
<dt> </dt>
تستخدمه لإضافة مصطلح أو عنوان لما سيوضع تحته في القائمة.
<dd> </dd>
تستخدمه لإضافة شرح للمصطلح أو خيار يندرج تحته.
دعم المتصفحات
الجدول التالي يظهر المتصفحات التي تدعم الوسم <dl>
.
Chrome |
Edge |
Firefox |
Opera |
Safari |
Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
مدعوم |
12 |
1 |
مدعوم |
مدعوم |
مدعوم |
مدعوم |
4 |
مدعوم |
مدعوم |
مدعوم |
خصائصه
لا يملك أي خصائص تم إعدادها خصيصاً له.
إستخدامه
في المثال التالي قمنا بإضافة قائمة وصف بداخلها عنوانين و خمس خيارات.
مثال
<dl>
<dt>Hot Drinks</dt>
<dd>- Coffee</dd>
<dd>- Nescafe</dd>
<dd>- Tee</dd>
<dt>Cold Drinks</dt>
<dd>- Red Bull</dd>
<dd>- Pepsi</dd>
</dl>
جرب الكود
تصميمه الإفتراضي
بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.
dl {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
نصائح و ملاحظات
لا تستخدم هذا الوسم بهدف عرض مساحة فارغة قبل المحتوى, بل استخدمه بهدف عرض قائمة وصف و عدل تصميمها كيفما تشاء بواسطة كود CSS.