قوائم HTML

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

يدعم HTML القوائم المرتبة، غير المرتبة والقوائم المخصصة:

قوائم HTML

مثال على الإنترنت

قائمة غير مرتبة
هذا المثال يعرض قائمة غير مرتبة.

قائمة مرتبة
هذا المثال يعرض قائمة مرتبة.

قائمة غير مرتبة HTML

القائمة غير المرتبة هي قائمة من العناصر، حيث يتم تسمية العناصر بـ نقاط كبيرة (النقاط السوداء الصغيرة).

استخدم علامة <ul> لتوليد قائمة غير مرتبة

<ul>
<li>عنصر القائمة 1</li>
<li>عنصر القائمة 2</li>
</ul>

يظهر المتصفح كما يلي:

• عنصر القائمة 1

• عنصر القائمة 2

قائمة مرتبة HTML

بالمثل، القائمة المرتبة هي قائمة من العناصر، حيث يتم تسمية العناصر بالأرقام. تبدأ القائمة المرتبة بـ <ol> علامة. تبدأ كل عنصر في القائمة المرتبة بـ <li> علامة.

استخدم الرقم لتسمية عناصر القائمة.

<ol>
<li>عنصر القائمة 1</li>
<li>عنصر القائمة 2</li>
</ol>

يظهر في المتصفح كما يلي:

1. عنصر القائمة 1

2. عنصر القائمة 2

قائمة مخصصة HTML

القائمة المخصصة ليست مجرد قائمة من العناصر، بل هي مجموعة من العناصر وشرحها.

تبدأ القائمة المخصصة بـ <dl> علامة. تبدأ كل عنصر في القائمة المخصصة بـ <dt> علامة. تبدأ كل تعريف في عنصر القائمة المخصصة بـ <dd> علامة.

<dl>
<dt>الربيع</dt>
<dd>- قد جاء الربيع، والربيع في كل مكان مليء بالحياة الربيعية</dd>
<dt>الخريف</dt>
<dd>- أوراق الشجر أصبحت صفراء في الخريف، والخريف هو موسم الحصاد</dd>
</dl>

يظهر المتصفح كما يلي:

• الربيع

• - قد جاء الربيع، والربيع في كل مكان مليء بالحياة الربيعية

• الخريف

• - أوراق الشجر أصبحت صفراء في الخريف، والخريف هو موسم الحصاد

ملاحظات - نصائح مفيدة

إشارة: يمكن استخدام الفقرات، النقاط، الصور، الروابط، وقوائم أخرى داخل عناصر القائمة.

مزيد من الأمثلة

أنواع مختلفة من القوائم المرتبة
هذا المثال يعرض أنواع مختلفة من القوائم المرتبة.

أنواع مختلفة من القوائم غير المرتبة
هذا المثال يعرض أنواع مختلفة من القوائم غير المرتبة.

قائمة مرتبة
هذا المثال يعرض كيفية تعريف القائمة المرتبة.

قائمة مرتبة 2
هذا المثال يعرض قائمة مرتبة معقدة.

قائمة مخصصة
هذا المثال يعرض قائمة مرتبة.

تسميات قائمة HTML