---
title: How to Use Lists
localeTitle: كيفية استخدام القوائم
---
## كيفية استخدام القوائم

تستخدم القوائم لتحديد مجموعة من العناصر المتتالية أو المعلومات ذات الصلة بطريقة محكمة التشكيل والدلائل ، مثل قائمة المكونات أو قائمة بالخطوات الإجرائية. يحتوي ترميز HTML على ثلاثة أنواع مختلفة من القوائم - قوائم **مرتبة** وغير **مرتبة** **والوصف** .

### القوائم المطلوبة

يتم استخدام قائمة مرتبة لتجميع مجموعة من العناصر ذات الصلة ، بترتيب معين. يتم إنشاء هذه القائمة مع العلامة `<ol>` . كل عنصر قائمة محاط بعلامة `<li>` .

##### الشفرة

 `
<ol> 
    <li>Mix ingredients</li> 
    <li>Bake in oven for an hour</li> 
    <li>Allow to stand for ten minutes</li> 
 </ol> 
` 

##### مثال

1.  مزيج المكونات
2.  يُخبز في الفرن لمدة ساعة
3.  السماح للوقوف لمدة عشر دقائق

### قوائم غير مرتبة

يتم استخدام قائمة غير مرتبة لتجميع مجموعة من العناصر ذات الصلة ، دون ترتيب معين. يتم إنشاء هذه القائمة مع العلامة `<ul>` . كل عنصر قائمة محاط بعلامة `<li>` .

##### الشفرة

 `
<ul> 
    <li>Chocolate Cake</li> 
    <li>Black Forest Cake</li> 
    <li>Pineapple Cake</li> 
 </ul> 
` 

#### مثال

*   كعكة الشوكولاتة
*   كيكة الغابة السوداء
*   كعكة الأناناس

### وصف القوائم

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

##### الشفرة

 `
<dl> 
    <dt>Bread</dt> 
    <dd>A baked food made of flour.</dd> 
    <dt>Coffee</dt> 
    <dd>A drink made from roasted coffee beans.</dd> 
 </dl> 
` 

##### انتاج |

خبز

طعام مخبوز مصنوع من الطحين.

قهوة

مشروب مصنوع من حبوب البن المحمص.

#### قائمة التصميم

يمكنك أيضا التحكم في نمط القائمة. يمكنك استخدام خاصية القوائم على `list-style` القائمة. يمكن أن تكون قائمتك نقطية أو مربعة أو في numearls رومانية أو يمكن أن تكون الصور التي تريدها.

الخاصية على `list-style` هي اختصار `list-style-type` ، `list-style-position` `list-style-image` ، `list-style-image` .

#### معلومات اكثر:

\[HTML lists · WebPlatform Docs\] (https://webplatform.github.io/docs/guides/html\_lists/ )