Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing

HTMLالوسم <dd>

  • تعريفه
  • دعم المتصفحات
  • خصائصه
  • إستخدامه
  • تصميمه الإفتراضي

تعريفه

نستخدم الوسم <dt> بداخل قوائم الوصف لإضافة شرح لمصطلح أو خيار يندرج موضوع قبله على النحو التالي.

<dl>
<dt></dt>
<dd></dd>
<dd></dd>
..
</dl>
<dl> <dt></dt> <dd></dd> <dd></dd> .. </dl>

  • <dl> </dl> هو الوسم الأساسي الذي يجب أن تضعه لإعلام المتصفح أنك تريد عرض البيانات بداخل قائمة وصف.
  • <dt> </dt> تستخدمه لإضافة مصطلح أو عنوان لما سيوضع تحته في القائمة.
  • <dd> </dd> تستخدمه لإضافة شرح للمصطلح أو خيار يندرج تحته.

ملاحظة: ليس شرطاً أن يكون المحتوى الذي تضعه بداخل الوسم <dd> عبارة نص فقط فمثلاً يمكنك وضع صورة, رابط أو حتى قائمة بداخله.

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

الجدول التالي يظهر المتصفحات التي تدعم الوسم <dd>.

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

جرب الكود

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

dd {
display: block;
margin-left: 40px;
}
dd { display: block; margin-left: 40px; }