القوائم الغير مرتبة في HTML

عنصر <ul> هو اختصار لكلمة unordered lists ويستخدم لإنشاء القوائم الغير مرتبة وهذا العنصر يمثل الحاوية للقائمة الغير مرتبة بحيث يشمل بداخله على العناصر المراد إضافتها للقائمة وذلك باستخدام عنصر <li> وهو اختصار لكلمة list item ويمثل عنصر واحد فقط من القائمة

<ul>

<ul>
</ul>

ولكي نستطيع إضافة عناصر القائمة لا بد من إضافة عنصر <li> وهو اختصار لـ listItem وهو يمثل عنصر واحد فقط من القائمة يمكنك تكرار هذا العنصر على حسب عدد العناصر المراد إضافتها في القائمة


الشكل الافتراضي

<ul>
    <li>القسم الأول</li>
    <li>القسم الثاني</li>
    <li>القسم الثالث</li>
    <li>القسم الرابع</li>
</ul>

  • القسم الأول
  • القسم الثاني
  • القسم الثالث
  • القسم الرابع


يمكن أيضا تغيير شكل الرموز التي تظهر قبل كل عنصر ، ويتم ذلك من خلال إضافة السمة type للعنصر ul وتعيين أي من القيم التالية disc - circle - square - none

disc

يظهر شكل الرمز قبل كل عنصر وهو عبارة عن شكل دائري غامق باللون الأسود وهو الشكل الافتراضي للقائمة
<ul type="disc">
    <li>القسم الأول</li>
    <li>القسم الثاني</li>
    <li>القسم الثالث</li>
    <li>القسم الرابع</li>
</ul>

  • القسم الأول
  • القسم الثاني
  • القسم الثالث
  • القسم الرابع


circle

يظهر شكل الرمز قبل كل عنصر من القائمة عبارة عن دائرة مفتوحة وهي محددة باطار خارجي باللون الأسود
<ul type="circle">
    <li>القسم الأول</li>
    <li>القسم الثاني</li>
    <li>القسم الثالث</li>
    <li>القسم الرابع</li>
</ul>


  • القسم الأول
  • القسم الثاني
  • القسم الثالث
  • القسم الرابع


square


يظهر شكل الرمز قبل كل عنصر من القائمة عبارة عن مربع صغير باللون الأسود الغامق
<ul type="square">
    <li>القسم الأول</li>
    <li>القسم الثاني</li>
    <li>القسم الثالث</li>
    <li>القسم الرابع</li>
</ul>


  • القسم الأول
  • القسم الثاني
  • القسم الثالث
  • القسم الرابع


none

يمكن من خلاله إخفاء الرموز التي تظهر قبل العناصر
<ul type="none">
    <li>القسم الأول</li>
    <li>القسم الثاني</li>
    <li>القسم الثالث</li>
    <li>القسم الرابع</li>
</ul>

  • القسم الأول
  • القسم الثاني
  • القسم الثالث
  • القسم الرابع