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

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

جربها بنفسك

HTML description lists

تستخدم description lists لعرض القوائم غير المرقمة.

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

جربها بنفسك

</> HTML description lists syntax
طريقة كتابة القوائم الوصفية في لغة HTML

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

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

Description list element

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

<dl>

</dl>

Description list main item

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

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

Description list sub item

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

<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