شرح القوائم في HTML بالعربي — تنظيم المحتوى بـ ul وol

القوائم من أكثر عناصر HTML استخداماً في المواقع الحقيقية. قائمة التنقل (Navigation) في موقعك؟ قائمة. خطوات الشرح؟ قائمة. مميزات المنتج؟ قائمة. HTML تمتلك ثلاثة أنواع تُغطي كل الحالات.

النوع الأول: القائمة غير المرتبة — <ul>

<ul> اختصار لـ Unordered List. تستخدم عندما لا يهم الترتيب — قائمة تسوق، قائمة مميزات، خيارات متعددة. المتصفح يُظهر نقطة (•) أمام كل عنصر افتراضياً.

<ul>
    <li>HTML — بناء هيكل الصفحة</li>
    <li>CSS — تنسيق الشكل والألوان</li>
    <li>JavaScript — إضافة التفاعل</li>
</ul>

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

• HTML — بناء هيكل الصفحة
• CSS — تنسيق الشكل والألوان
• JavaScript — إضافة التفاعل

<li> اختصار لـ List Item — كل عنصر في القائمة. يُستخدم داخل <ul> وداخل <ol> أيضاً.

النوع الثاني: القائمة المرتبة — <ol>

<ol> اختصار لـ Ordered List. تستخدم عندما يهم الترتيب — خطوات وصفة، تعليمات تثبيت برنامج، ترتيب حسب الأولوية. المتصفح يُضيف أرقاماً تلقائياً (1, 2, 3...).

<ol>
    <li>افتح محرر الكود (VS Code)</li>
    <li>أنشئ ملفاً جديداً باسم index.html</li>
    <li>اكتب الهيكل الأساسي لـ HTML</li>
    <li>احفظ الملف وافتحه في المتصفح</li>
</ol>

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

1. افتح محرر الكود (VS Code)
2. أنشئ ملفاً جديداً باسم index.html
3. اكتب الهيكل الأساسي لـ HTML
4. احفظ الملف وافتحه في المتصفح

خصائص <ol> الإضافية

يمكنك التحكم في نمط الترقيم وبدايته:

<!-- تغيير نمط الترقيم -->
<ol type="A">   <!-- A, B, C... -->
    <li>الخيار الأول</li>
    <li>الخيار الثاني</li>
</ol>

<ol type="i">   <!-- i, ii, iii... (أرقام رومانية) -->
    <li>الخيار الأول</li>
    <li>الخيار الثاني</li>
</ol>

<!-- البدء من رقم محدد -->
<ol start="5">
    <li>هذا هو البند الخامس</li>
    <li>هذا هو البند السادس</li>
</ol>

<!-- ترقيم تنازلي -->
<ol reversed>
    <li>المركز الأول (سيظهر أكبر رقم)</li>
    <li>المركز الثاني</li>
    <li>المركز الثالث</li>
</ol>

النوع الثالث: قائمة الوصف — <dl>

<dl> اختصار لـ Description List. مصممة خصيصاً لعرض مصطلحات مع تعريفاتها — مثل قاموس، FAQ، أو مسرد مصطلحات.

تتكون من ثلاثة وسوم:

• <dl> — الحاوية الرئيسية
• <dt> — المصطلح (Description Term)
• <dd> — التعريف (Description Details)

<dl>
    <dt>HTML</dt>
    <dd>لغة ترميز تُستخدم لبناء هيكل صفحات الويب.</dd>

    <dt>CSS</dt>
    <dd>لغة تنسيق تُستخدم لتجميل صفحات الويب وتحديد شكلها.</dd>

    <dt>JavaScript</dt>
    <dd>لغة برمجة تُضيف التفاعل والحركة لصفحات الويب.</dd>
</dl>

النتيجة — المتصفح يُبرز المصطلح ويُزيح التعريف قليلاً:

HTML

لغة ترميز تُستخدم لبناء هيكل صفحات الويب.

CSS

لغة تنسيق تُستخدم لتجميل صفحات الويب.

JavaScript

لغة برمجة تُضيف التفاعل لصفحات الويب.

القوائم المتداخلة — قائمة داخل قائمة

يمكنك وضع قائمة داخل عنصر <li> لإنشاء هيكل هرمي متعدد المستويات. يُستخدم كثيراً في قوائم التنقل وخرائط المواقع.

<ul>
    <li>دروس HTML
        <ul>
            <li>المقدمة</li>
            <li>الوسوم الأساسية</li>
            <li>العناوين والفقرات</li>
        </ul>
    </li>
    <li>دروس CSS
        <ul>
            <li>المحددات (Selectors)</li>
            <li>الألوان والخطوط</li>
        </ul>
    </li>
    <li>دروس JavaScript</li>
</ul>

يمكنك أيضاً مزج الأنواع — <ul> داخل <ol> والعكس.

جدول مرجعي — أنواع القوائم الثلاثة

الأسئلة الشائعة — FAQ

هل يمكنني تغيير شكل النقطة في <ul>؟

نعم، بـ CSS: ul { list-style-type: square; } (مربع)، أو circle (دائرة فارغة)، أو none (بدون نقطة) — يُستخدم كثيراً لقوائم التنقل.

لماذا يُستخدم <ul> لقوائم التنقل في المواقع؟

لأن روابط التنقل هي قائمة من الروابط بدون ترتيب محدد لأهميتها. ثم نُزيل النقاط بـ CSS ونُنسقها أفقياً. هذا هو الأسلوب الأمثل دلالياً لـ SEO وإمكانية الوصول.

هل يمكن لـ <li> أن يحتوي على أكثر من نص؟

نعم، <li> يمكنه استيعاب أي محتوى HTML: فقرات، صور، روابط، وحتى قوائم متداخلة.

ما الفرق بين <dt> و<dd>؟

<dt> هو عنوان المصطلح (Term) — مثل "HTML". <dd> هو تعريف ذلك المصطلح (Definition/Detail) — مثل "لغة ترميز صفحات الويب". يمكن أن يكون لمصطلح واحد عدة تعريفات (<dd> متعددة).