العنصر <ul>

يُمثِّل العنصر <ul> قائمةً غير مرتبة من العناصر، التي تُعرَض على شكل قائمة منقطة عادةً.

قائمة غير مرتبة <ul> فيها ثلاثة عناصر <li>:

<ul>
  <li>العنصر الأول</li>
  <li>العنصر الثاني</li>
  <li>العنصر الثالث</li>
</ul>

بطاقة العنصر

تصنيفات المحتوى	محتوى تنظيمي.
المحتوى المسموح	عنصر <li> واحد أو أكثر، ويمكن لهذا العنصر أن يحتوي أيضًا على قوائم <ol> أو <ul> متشعبة داخله.
الوسم المختصر	لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب	أي عنصر يقبل المحتوى التنظيمي.
واجهة DOM	HTMLUListElement

دعم المتصفحات

Chrome	Firefox	Edge	Safari	Opera
مدعوم	مدعوم	مدعوم	مدعوم	مدعوم

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

compact

هذه الخاصية المنطقية (boolean) تُحدِّد إذا كانت القائمة ستُعرَض متراصةً على بعضها، لكن تفسير هذه الخاصية يختلف حسب المتصفح ولا تعمل بشكل متناسق في جميع المتصفحات.

يجدر بالذكر أنَّ هذه الخاصية أصبحت مهملة في HTML5، ولا يجب استخدامها، وإنما يمكن تنسيق العنصر <ul> عبر أنماط CSS، ونستطيع تطبيق نفس تأثير هذه الخاصية إذا ضبطنا قيمة line-height إلى 80%.

type

تستعمل هذه الخاصية لتحديد نوع النقط التي تظهر قبل عناصر القائمة وهي:

• circle
• disc
• square

لكن هذه الخاصية أصبحت مهملةً أيضًا، لذا لا تستعملها وإنما استعمل خاصية list-style-type في CSS.

ملاحظات الاستخدام

• يُستخدم العنصر <ul> لتجميع مجموعة من العناصر التي ليس لها ترتيب رقمي والتي لا يكون لترتيبها أهمية، وتوضع عادةً قبل العناصر نقط أو مربعات أو دوائر ...إلخ. ويمكن تعريف شكل تلك النقط باستخدام خاصية list-style-type في CSS.
• لا يوجد حد أقصى لتشعّب القوائم (سواءً كانت قوائم مرتبة <ol> أو غير مرتبة <ul>).
• عنصرا <ol> و <ul> يمثلان قائمةً بالعناصر، ويختلفان عن بعضهما أنَّ ترتيب العناصر في <ol> مهم. لذا إذا كنتَ في حيرةٍ من أمرك وأردتَ أن تعرف أيُّ العنصرين تختار، فجرِّب تغيير ترتيب العناصر، فإن تغيّر المعنى فيجب استخدام العنصر <ol> وإن بقي على حاله فاستعمل <ul>.

أمثلة

مثال عن قائمة غير مرتبة متشعبة، لاحظ مكان وسم الإغلاق للعنصر <li>:

<ul>
  <li>العنصر الأول</li>
  <li>العنصر الثاني  <!-- </li> لا يوجد وسم إغلاق --> 
    <ul>
      <li>العنصر الفرعي الأول</li>
      <li>العنصر الفرعي الثاني   <!-- </li> لا يوجد وسم إغلاق --> 
        <ul>
          <li>العنصر الفرعي الأول في القائمة الفرعية</li>
          <li>العنصر الفرعي الثاني في القائمة الفرعية</li>
          <li>العنصر الفرعي الثالث في القائمة الفرعية</li>
        </ul>
      </li>   <!-- </li> هنا وسم الإغلاق -->
      <li>العنصر الفرعي الثالث</li>
    </ul>
    <!-- </li> هنا وسم الإغلاق -->
  </li>
  <li>العنصر الثالث</li>
</ul>

مثال عن قائمة غير مرتبة يتشعب داخلها قائمة مرتبة <ol>:

<ul>
  <li>العنصر الأول</li>
  <li>العنصر الثاني  <!-- </li> لا يوجد وسم إغلاق --> 
    <ol>
      <li>العنصر الفرعي الأول</li>
      <li>العنصر الفرعي الثاني</li>
      <li>العنصر الفرعي الثالث</li>
    </ol>
    <!-- </li> هنا وسم الإغلاق -->
  </li>
  <li>العنصر الثالث</li>
</ul>

التنسيق الافتراضي

تعرض أغلبية المتصفحات العنصر <ul> مع ضبط قيمة الخاصية display إلى block، وشكل الإشارة الخاصة بالقائمة list-style-type إلى disc، مع ضبط الهوامش (margin-top و margin-bottom إلى 1em، و margin-left و margin-right إلى 0)، والحاشية اليسرى padding-left (أو اليمنى padding-right إذا كان اتجاه النص من اليمين إلى اليسار) إلى 40px:

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

مصادر ومواصفات

• معيار HTML Living Standard.
• مواصفة HTML5.
• مواصفة HTML 4.01.