انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 25
دورة لغة HTML

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

في هذا الدرس، سوف تتعلم كيفية بناء عناصر نصية مترابطة ومتفرعة من بعضها البعض باستخدام عنصر <dl> في لغة HTML. سواء كانت العناصر مرقمة أو غير مرقمة، يمكنك تنظيمها بطريقة واضحة ضمن القوائم الوصفية.

ابدأ التعلّم استكشف الأمثلة
THE BUILDING BLOCKS OF THE WEBHTML
index.html
1<h1>Hello, web.</h1>
وسم الفتحالمحتوىوسم الإغلاق
النتيجة في المتصفح Hello, web.
كل صفحة رائعة تبدأ بعنصر.
أقسام الدرس
2
الأمثلة
5
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
5,153
محتوى الدرس
في هذا الدرس 2تصفّح المواضيع

Descriptive Lists in HTML القوائم الوصفية في HTML

تُستخدم القوائم الوصفية [description lists] في تنظيم مجموعات من الأسماء والقيم أو المصطلحات والأوصاف المرتبطة بها، مثل بيانات تعريف أو مصطلح وتعريفه؛ ليست علاقة شجرة من عناوين رئيسية وفرعية بالضرورة. يمكن وضع ol داخل وصف dd لعرض قائمة مرتبة؛ لا يحوّل ذلك dl نفسه إلى قائمة مرقمة.


  • عنصر <dl> هو المسؤول عن إنشاء قوائم وصفية، وهو من نوع [العناصر المتداخلة nested elements].

  • كل عنصر نصي رئيسي داخل القائمة الوصفية يتم إنشاؤه باستخدام عنصر <dt> في لغة HTML، وهو عنصر المصطلح أو الاسم description term، وهو من نوع [العناصر المتداخلة nested elements].

  • كل عنصر نصي فرعي داخل القائمة الوصفية يتم إنشاؤه باستخدام عنصر <dd> في لغة HTML، وهو عنصر تفاصيل الوصف description details، وهو من نوع [العناصر المتداخلة nested elements].

  • يمكن إضافة عدد غير محدود من العناصر النصية داخل القوائم الوصفية، سواءً كانت العناصر رئيسية أو فرعية.

Web Development Technologies: Front-End And Back-End

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

HTML 
<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 هي:

1. نقوم بإنشاء عنصر <dl> ليكون الحاوية للقوائم الوصفية.

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

3. نضيف dd بعد dt كعنصر شقيق داخل dl لتقديم الوصف أو القيمة، ولا نضع dd داخل dt.

Description List Element

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

HTML 
<dl>

</dl>

Main Item in Description List

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

هذا المقطع خطوة جزئية لعرض dt وحده؛ يكتمل بناء المجموعة عندما تتبعه dd واحدة أو أكثر كما في المثال التالي.

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

Descriptive List with Multiple Main Items

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

يجوز أن تضم المجموعة عدة أسماء dt يشترك جميعها في الوصف dd الذي يأتي بعدها. الأسماء هنا في المستوى نفسه وليست عناصر فرعية متداخلة.

HTML 
<dl>
  <dt>Main Item</dt>
  <dt>Related Item 1</dt>
  <dt>Related Item 2</dt>
  <dt>Related Item 3</dt>
  <dd>A description shared by these terms.</dd>
</dl>

Description Lists Syntax

كيفية إنشاء القوائم الوصفية في لغة HTML كما يلي:

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>
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…