العنصر <ul>

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

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

<ul>
    <li>first item</li>
    <li>second item</li>
    <li>third item</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>first item</li>
  <li>second item     
  <!-- Look, the closing </li> tag is not placed here! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem
      <!-- Same for the second nested unordered list! -->
        <ul>
          <li>second item second subitem first sub-subitem</li>
          <li>second item second subitem second sub-subitem</li>
          <li>second item second subitem third sub-subitem</li>
        </ul>
      </li> <!-- Closing </li> tag for the li that
                  contains the third unordered list -->
      <li>second item third subitem</li>
    </ul>
  <!-- Here is the closing </li> tag -->
  </li>
  <li>third item</li>
</ul>

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

<ul>
  <li>first item</li>
  <li>second item
  <!-- Look, the closing </li> tag is not placed here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  <!-- Here is the closing </li> tag -->
  </li>
  <li>third item</li>
</ul>

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

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