القوائم غير المُرتبة (Unordered Lists)

نستكمل اليوم دراسة هياكل القوائم بالانتقال إلى النوع الثاني والأكثر شيوعاً: **القوائم غير المُرتبة (Unordered Lists)**، والتي يتم تعريفها باستخدام الوسم <ul>.

تُستخدم هذه القوائم عندما نرغب في تجميع مجموعة من العناصر المترابطة التي "لا" يهمها الترتيب. المعنى الدلالي هنا هو "التجميع" (Grouping) وليس "التسلسل" (Sequencing). الأمثلة الكلاسيكية تشمل: قائمة المشتريات، أو قائمة الميزات، أو (وهو الأهم) قوائم التنقل (Navigation Menus) في المواقع.

التعريف الأساسي: الوسم `<ul>`

الوسم <ul> هو اختصار لمصطلح "Unordered List" (قائمة غير مرتبة).

مثل شقيقه <ol>، هو "وسم حاوٍ" (Container Tag) مزدوج، يتطلب وسم فتح <ul> ووسم إغلاق </ul>.

وظيفته الدلالية هي إخبار المتصفح بأن العناصر الموجودة بداخله هي "مجموعة" واحدة، ولكن "ترتيب" ظهورها ليس له أهمية تسلسلية. المتصفح، افتراضيًا، سيقوم بعرض هذه العناصر مسبوقة بـ "علامات" (Markers) أو "نقاط" (Bullets)، بدلاً من الأرقام.

يُعد هذا الوسم من أكثر الوسوم استخداماً في بناء هياكل المواقع، خاصة في بناء قوائم التنقل (Menus).

البنية الإلزامية: الوسم `<li>`

كما هو الحال مع القوائم المرتبة، فإن القوائم غير المرتبة تتبع نفس القاعدة الهيكلية الصارمة.

الوسم <ul> (الأب) لا يمكنه احتواء نصوص أو أي وسوم أخرى كـ "ابن مباشر" (Direct Child) باستثناء وسم واحد فقط: <li>.

الوسم <li> (اختصار "List Item") هو الذي يحمل المحتوى الفعلي لكل عنصر في القائمة (سواء كان نصاً، فقرة، صورة، أو حتى قائمة متداخلة).

البنية الصحيحة (قانونية): <ul><li>...</li><li>...</li></ul>

البنية الخاطئة (غير قانونية): <ul>نص مباشر هنا</ul>
<ul>فقرة هنا</ul>

إذا أردت وضع فقرة  داخل قائمة، يجب وضعها "داخل" عنصر <li>، وليس كبديل له.
(مثال صحيح: <ul><li>فقرة داخل عنصر قائمة</li></ul>)

مثال (1): قائمة غير مرتبة بسيطة (قائمة مشتريات)

المثال الكلاسيكي للقائمة غير المرتبة هو قائمة المشتريات. لا يهم إذا اشتريت "الخبز" قبل "الحليب" أو العكس؛ المهم هو أن كلاهما في القائمة.

لاحظ المظهر الافتراضي: المتصفح سيقوم بوضع "نقطة دائرية مصمتة" (تسمى disc) بجوار كل عنصر <li>.

مثال (1): قائمة غير مرتبة بسيطة


<body>

    <h2>قائمة المشتريات</h2>
    
    <ul>
        <li>حليب</li>
        <li>خبز</li>
        <li>بيض</li>
        <li>تفاح</li>
    </ul>

</body>

النتيجة المتوقعة في المتصفح:

حليب
خبز
بيض
تفاح

السلوك الهيكلي (Block-level) والهوامش الافتراضية

تماماً مثل القوائم المرتبة <ol>، فإن الوسم <ul> والوسم <li> كلاهما يُعتبران "عناصر كُتَلية" (Block-level elements) بشكل افتراضي.

هذا يعني أن:

الوسم <ul> سيبدأ على سطر جديد ويشغل 100% من العرض المتاح له.
كل وسم <li> بداخله سيبدأ أيضاً على سطر جديد، مما ينتج عنه الشكل "العمودي" للقائمة.

افتراضيًا، تضيف المتصفحات هوامش (margin) أعلى وأسفل القائمة <ul> لفصلها عن المحتوى الآخر.

الأهم من ذلك: تقوم المتصفحات بإضافة "حشو داخلي" (padding) على جانب القائمة (في اللغات اللاتينية يكون padding-left، وفي العربية يكون padding-right) لإفساح المجال لعلامات الترقيم (النقاط) حتى لا تتداخل مع النص. هذا هو سبب إزاحة القائمة قليلاً عن الحافة.

سيتم شرح كيفية التحكم الدقيق في هذه الهوامش والحشو لاحقاً عند دراسة لغة CSS.

التحكم في "أنواع" العلامات (Markers)

السؤال الذي طرحه المستخدم هو "كل أنواعها". على عكس القوائم المرتبة (<ol>) التي تحتوي على أنواع ترقيم واضحة (1, A, a, I, i)، فإن القوائم غير المرتبة (<ul>) لها "أنماط" (Styles) للعلامات.

يجب أن نفرق بوضوح بين الطريقة القديمة (المُهملة) والطريقة الحديثة (الصحيحة) للتحكم في هذه الأنماط.

الطريقة القديمة (المُهملة): الخاصية `type`

في إصدارات HTML القديمة (مثل HTML 4)، كان بإمكان المطورين استخدام الخاصية type مباشرة على وسم <ul> للتحكم في شكل النقطة.

كانت هذه الخاصية تقبل 3 قيم:

type="disc": (القيمة الافتراضية) دائرة مصمتة (●).
type="circle": دائرة مفرغة (○).
type="square": مربع مصمت (■).

تحذير هام: تم "إهمال" (Deprecated) هذه الخاصية في معيار HTML5. هذا يعني أنه لا يجب استخدامها إطلاقاً في التطوير الحديث. المتصفحات ما زالت تدعمها (لأغراض التوافق مع المواقع القديمة)، ولكن الاعتماد عليها يُعد ممارسة سيئة.

لماذا أُهملت؟ تطبيقاً لمبدأ "فصل الاهتمامات" (Separation of Concerns): HTML مسؤولة عن "الهيكل والمعنى"، بينما CSS مسؤولة عن "الشكل والتصميم". شكل النقطة هو "تصميم" وليس "هيكل".

مثال (2): استخدام الخاصية `type` المُهملة

هذا المثال للعرض التعليمي فقط، ويجب "تجنب" استخدام هذه الطريقة في المشاريع الحقيقية.

مثال (2): الخاصية type (مهملة)


<body>

    <h3>دائرة مفرغة (type="circle")</h3>
    <ul type="circle">
        <li>عنصر 1</li>
        <li>عنصر 2</li>
    </ul>

    <h3>مربع مصمت (type="square")</h3>
    <ul type="square">
        <li>عنصر 1</li>
        <li>عنصر 2</li>
    </ul>

</body>

(تذكير):
يُعد استخدام الخاصية type على <ul> ممارسة مُهملة. الطريقة الصحيحة والاحترافية هي استخدام CSS.

الطريقة الحديثة (الصحيحة): خاصية CSS `list-style-type`

الطريقة المعتمدة في HTML5 والـ CSS الحديثة هي استخدام خاصية CSS تسمى list-style-type.

(ملاحظة: سنتناول CSS بالتفصيل في دروس متقدمة، ولكن لا بد من ذكر هذه الخاصية هنا لشرح "أنواع" القوائم).

يمكننا تطبيق هذه الخاصية "مؤقتاً" باستخدام الخاصية العامة style (تسمى Inline CSS) مباشرة على وسم <ul>.

تأخذ هذه الخاصية نفس القيم القديمة بالإضافة إلى قيمة هامة جداً هي none.

style="list-style-type: disc;" (الافتراضي)
style="list-style-type: circle;"
style="list-style-type: square;"
style="list-style-type: none;" (لإزالة العلامات بالكامل)

مثال (3): تطبيق أنماط CSS المختلفة (disc, circle, square)

يوضح هذا المثال كيفية تطبيق الأنماط المختلفة باستخدام الطريقة الحديثة (خاصية style).

مثال (3): استخدام CSS list-style-type


<body>

    <h3>النمط الافتراضي (disc)</h3>
    <ul>
        <li>عنصر 1</li>
    </ul>

    <h3>نمط الدائرة (circle)</h3>
    <ul style="list-style-type: circle;">
        <li>عنصر 1</li>
    </ul>

    <h3>نمط المربع (square)</h3>
    <ul style="list-style-type: square;">
        <li>عنصر 1</li>
    </ul>

</body>

إزالة العلامات تماماً (`list-style-type: none`)

يُعد هذا الاستخدام هو الأهم والأكثر شيوعاً في تصميم الويب الحديث.

في أغلب الأحيان، وخاصة عند بناء "قوائم التنقل" (Navigation Menus)، لا نرغب في ظهور "النقاط" بجوار الروابط. نريد فقط الاستفادة من "الهيكلية" و "المعنى الدلالي" للقائمة (كمجموعة من الروابط)، ولكننا نريد التحكم الكامل في "الشكل" (Display) الخاص بها.

القيمة none تقوم بإزالة علامات الترقيم (النقاط) بالكامل. (ملاحظة: هي لا تزيل الحشو الداخلي padding، والذي يجب إزالته أيضاً بشكل منفصل باستخدام CSS padding: 0; للحصول على تحكم كامل).

مثال (4): قائمة بدون علامات (الاستخدام الأكثر شيوعاً)

هذا المثال يوضح كيف تبدو القائمة عند استخدام list-style-type: none. هذا هو الأساس الذي تُبنى عليه معظم قوائم التنقل الأفقية والعمودية في المواقع.

مثال (4): إزالة العلامات (none)


<body>

    <h3>قائمة تنقل أولية (بدون نقاط)</h3>
    
    <ul style="list-style-type: none;">
        <li>الرئيسية</li>
        <li>من نحن</li>
        <li>خدماتنا</li>
        <li>اتصل بنا</li>
    </ul>

</body>

النتيجة المتوقعة في المتصفح:

(ستظهر العناصر كنصوص عادية فوق بعضها البعض، ولكن بدون أي نقاط بجوارها، مع الاحتفاظ بالحشو الداخلي `padding` الذي يزيحها قليلاً).

القوائم المتداخلة (Nested Unordered Lists)

تماماً مثل القوائم المرتبة <ol>، يمكن تداخل القوائم غير المرتبة <ul> لإنشاء هياكل هرمية.

القاعدة الذهبية للتداخل (تُطبق هنا أيضاً):

لإنشاء قائمة متداخلة، يجب وضع وسم <ul> الجديد (الابن) "بالكامل" داخل وسم <li> تابع للقائمة الأب.

هيكل صحيح: <ul><li>عنصر أب<ul><li>عنصر ابن</li></ul></li></ul>.

سلوك المتصفح الافتراضي: عند تداخل القوائم غير المرتبة، تقوم المتصفحات تلقائيًا بتغيير "نمط" العلامة لكل مستوى؛ لتسهيل التمييز البصري بين المستويات.

المستوى 1 (الأب): يستخدم disc (●)
المستوى 2 (الابن): يستخدم circle (○)
المستوى 3 (الحفيد): يستخدم square (■)

مثال (5): قائمة متداخلة (هيكل قائمة تنقل)

هذا المثال يوضح البنية الدلالية الصحيحة لإنشاء قائمة تنقل تحتوي على "قوائم منسدلة" (Dropdowns) فرعية.

مثال (5): قائمة غير مرتبة متداخلة


<body>

    <h2>هيكل قائمة تنقل بمستويات</h2>
    
    <ul> <!-- المستوى الأول (disc) -->
        <li>الرئيسية</li>
        <li>من نحن</li>
        <li>خدماتنا
            <!-- القائمة الفرعية توضع "داخل" الـ li -->
            <ul> <!-- المستوى الثاني (circle) -->
                <li>تصميم المواقع</li>
                <li>تطوير التطبيقات
                    <ul> <!-- المستوى الثالث (square) -->
                        <li>تطبيقات أندرويد</li>
                        <li>تطبيقات iOS</li>
                    </ul>
                </li> <!-- نهاية عنصر "تطوير التطبيقات" -->
                <li>التسويق الرقمي</li>
            </ul>
        </li> <!-- نهاية عنصر "خدماتنا" -->
        <li>اتصل بنا</li>
    </ul>

</body>

(ملخص الدرس):
1. استخدم <ul>...</ul> عندما يكون "ترتيب" العناصر غير مهم (لغرض التجميع).
2. العناصر الفعلية تُكتب داخل وسوم <li>...</li> (وهي الأبناء المباشرون الوحيدون المسموح بهم).
3. المتصفح هو من يقوم بإنشاء "العلامات" (النقاط) تلقائياً (الافتراضي: disc).
4. تجنب استخدام الخاصية type المُهملة.
5. استخدم خاصية CSS list-style-type للتحكم في شكل العلامة (disc, circle, square).
6. استخدم list-style-type: none لإزالة العلامات بالكامل (شائع جداً في قوائم التنقل).
7. عند التداخل، يجب وضع القائمة الجديدة (<ul>) "داخل" عنصر <li> تابع للقائمة الأب.

شرح القوائم غير المُرتبة HTML