تُستخدم القوائم الوصفية [description lists] في صف مجموعة عناصر نصية مؤلفة من فئات أو أجزاء رئيسية، متفرع عنها أجزاء فرعية، حيث يتم تقسيم القائمة إلى عدة أجزاء تكون غير مرقمة، كما يمكن جعلها مرقمة عن طريق استخدام nested lists عن طريق عنصر <ol> .

عنصر <dl> هو المسؤول عن إنشاء قوائم وصفية وهو من نوع العناصر المُتداخلة nested elements.
كل عنصر نصي رئيسي داخل القائمة الوصفية يتم إنشاءه عن طريق عنصر <dt> في لغة HTML -اختصار tag defines- وهو من نوع العناصر المُتداخلة nested elements.
كل عنصر نصي فرعي داخل القائمة الوصفية يتم إنشاءه عن طريق عنصر <dd> في لغة HTML -اختصار tag describes- وهو من نوعالعناصر المُتداخلة nested elements.
يمكن إضافة عدد غير محدود من العناصر النصية داخل القوائم الوصفية سواءً كان العنصر النصي رئيسي أو فرعي.

جربها بنفسك

Web Development Technologies: Front-End And Back-End

يعرض المثال تقنيات تطوير الويب: HTML للواجهة الأمامية وPHP للواجهة الخلفية.

<dl>
  <dt>Front-End</dt>
  <dd>HTML</dd>
  <dt>Back-End</dt>
  <dd>PHP</dd>
</dl>

جربها بنفسك

</> How To Write Description Lists In HTML
كيفية كتابة قوائم الوصف في HTML

خطوات إنشاء قوائم وصفية description lists في لغة HTML هي:

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

Description Iist Element

عنصر <dl> المسؤول عن بناء القوائم الوصفية.

<dl>

</dl>

Main Item In Description List

عنصر <dt> المسؤول عن إضافة عناصر رئيسية داخل القوائم الوصفية.

<dl>
  <dt>Main Item</dt>
</dl>

Description List with Multiple Items

مثال على استخدام عنصر `<dt>` لإدراج عناصر متعددة في قائمة وصفية.

<dl>
  <dt>Main Item</dt>
  <dt>Sub Item</dt>
  <dt>Sub Item</dt>
  <dt>Sub Item</dt>
</dl>

Description Lists Syntax

طريقة كتابة القوائم الوصفية في لغة HTML.

<dl>
  <dt>Front-End</dt>
    <dd>HTML</dd>
    <dd>CSS</dd>
    <dd>JS</dd>
  <dt>Back-End</dt>
    <dd>PHP</dd>
    <dd>MYSQL</dd>
    <dd>Laravel</dd>
</dl>

جربها بنفسك

معلومة تهمك

يُمكنكَ وضع أي نصوص أو عناصر HTML أخرى داخل القائمة الوصفية سواء داخل العناصر الرئيسية أو داخل العناصر الفرعية.
عن طريق لغة CSS يُمكنكَ التحكم في تنظيم العلامات داخل القائمة الوصفية الرئيسية والفرعية، وتغييرها.

معلومات تهمك

لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

HTML Description List
القوائم الوصفية في لغة HTML

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات HTML Description List HTML