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

لماذا القوائم مهمة في HTML

القوائم هي من اكثر الهياكل استخداما على الويب. قوائم التنقل والتعليمات خطوة بخطوة وميزات المنتجات والاسئلة الشائعة والمسارد كلها تعتمد على القوائم. توفر HTML ثلاثة انواع من القوائم: القوائم غير المرتبة (<ul>) للعناصر التي لا يهم تسلسلها، و القوائم المرتبة (<ol>) للعناصر التي يهم تسلسلها، و القوائم الوصفية (<dl>) لازواج المصطلحات والتعريفات. استخدام نوع القائمة الصحيح يعطي محتواك معنى دلاليا تفهمه المتصفحات وقارئات الشاشة ومحركات البحث.

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

القائمة غير المرتبة تجمع عناصر ليس لها ترتيب او تصنيف معين. تنشا بعنصر <ul> وكل عنصر بداخلها يغلف في عنصر <li> (عنصر قائمة). افتراضيا تعرض المتصفحات عناصر القائمة غير المرتبة بنقاط لكن يمكن تغيير هذا التنسيق بالكامل باستخدام CSS.

<h3>تقنيات الواجهة الامامية</h3>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
  <li>TypeScript</li>
</ul>

القوائم غير المرتبة هي الخيار الصحيح عندما تكون العناصر متساوية في الاهمية ويمكن اعادة ترتيبها دون فقدان المعنى. قوائم التسوق وقوائم الميزات ومجموعات الوسوم كلها امثلة جيدة.

القوائم المرتبة وسماتها

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

عنصر <ol> له ثلاث سمات مفيدة. سمة start تحدد رقم البداية وهي مفيدة عند استئناف قائمة بعد انقطاع. سمة reversed تعد تنازليا بدلا من تصاعديا وهي مفيدة لتصنيفات العد التنازلي. سمة type تغير نمط الترقيم: 1 للارقام (الافتراضي)، a للاحرف الصغيرة، A للاحرف الكبيرة، i للارقام الرومانية الصغيرة، و I للارقام الرومانية الكبيرة.

<!-- قائمة مرتبة قياسية -->
<h3>كيفية نشر موقع ويب</h3>
<ol>
  <li>اكتب واختبر الكود محليا</li>
  <li>ارفع الكود الى مستودع Git</li>
  <li>اعد خادم الاستضافة</li>
  <li>انشر باستخدام CI/CD او الرفع اليدوي</li>
  <li>تحقق من ان الموقع المباشر يعمل بشكل صحيح</li>
</ol>

<!-- عد تنازلي لافضل 3 -->
<h3>افضل 3 لغات برمجة (2025)</h3>
<ol reversed>
  <li>JavaScript</li>
  <li>Python</li>
  <li>TypeScript</li>
</ol>

<!-- البدء من رقم محدد -->
<h3>خطوات مستمرة</h3>
<ol start="4" type="A">
  <li>راجع طلب السحب</li>
  <li>ادمج في الفرع الرئيسي</li>
  <li>ضع وسم اصدار</li>
</ol>

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

يمكن تداخل القوائم داخل بعضها لانشاء تسلسلات هرمية متعددة المستويات. توضع القائمة المتداخلة داخل عنصر <li> من القائمة الام. يمكنك تداخل القوائم غير المرتبة داخل القوائم المرتبة والعكس. تغير المتصفحات تلقائيا نمط النقطة لكل مستوى تداخل (قرص ودائرة ومربع) وتعلن قارئات الشاشة عمق التداخل للمستخدمين.

<ol>
  <li>اساسيات HTML
    <ul>
      <li>هيكل المستند</li>
      <li>عناصر النص</li>
      <li>الروابط والصور</li>
    </ul>
  </li>
  <li>اساسيات CSS
    <ul>
      <li>المحددات والخصائص</li>
      <li>نموذج الصندوق</li>
      <li>تخطيط Flexbox</li>
    </ul>
  </li>
  <li>اساسيات JavaScript
    <ul>
      <li>المتغيرات وانواع البيانات</li>
      <li>الدوال والاحداث</li>
      <li>التعامل مع DOM</li>
    </ul>
  </li>
</ol>

القوائم الوصفية

تستخدم القوائم الوصفية لازواج المصطلحات والتعريفات. تبنى بثلاثة عناصر: <dl> (قائمة وصفية) تغلف القائمة بالكامل، و <dt> (مصطلح الوصف) يحدد المصطلح، و <dd> (تفاصيل الوصف) توفر التعريف او الوصف. يمكن ان يكون لمصطلح واحد عدة اوصاف ويمكن ان تشترك عدة مصطلحات في وصف واحد.

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

  <dt>CSS</dt>
  <dd>اوراق الانماط المتتالية. لغة انماط تستخدم للتحكم في العرض المرئي لعناصر HTML.</dd>

  <dt>API</dt>
  <dd>واجهة برمجة التطبيقات. مجموعة من القواعد والبروتوكولات التي تسمح لتطبيقات البرمجيات المختلفة بالتواصل مع بعضها.</dd>

  <dt>DOM</dt>
  <dd>نموذج كائن المستند. واجهة برمجية تمثل الصفحة كشجرة من الكائنات مما يسمح للنصوص البرمجية بقراءة المحتوى وتعديله.</dd>
</dl>

القوائم الوصفية هي الخيار الدلالي الصحيح للمسارد وعروض البيانات الوصفية (مثل صفحة مواصفات المنتج) واقسام الاسئلة الشائعة حيث كل سؤال هو <dt> وكل اجابة هي <dd> ومعلومات ازواج المفتاح والقيمة.

متى تستخدم كل نوع قائمة

اختيار نوع القائمة الصحيح مسالة معنى دلالي. استخدم <ul> عندما لا يهم الترتيب: قوائم المكونات وابرز الميزات وروابط التنقل والوسوم. استخدم <ol> عندما يكون التسلسل ذا معنى: التعليمات خطوة بخطوة والتصنيفات والبنود القانونية المرقمة والجداول الزمنية. استخدم <dl> عندما تقرن مصطلحات باوصاف: المسارد والاسئلة الشائعة ومعلومات الاتصال ومواصفات المنتج. اذا لم تكن متاكدا اسال نفسك هذا السؤال: هل اعادة ترتيب العناصر يغير المعنى؟ اذا نعم استخدم قائمة مرتبة. اذا لا استخدم قائمة غير مرتبة. اذا كانت البيانات ازواج مصطلحات وتعريفات استخدم قائمة وصفية.

تنسيق القوائم بواسطة CSS

نادرا ما تتطابق النقاط والارقام الافتراضية على القوائم مع تصميم الموقع. يمنحك CSS تحكما كاملا في مظهر القوائم. خاصية list-style-type تغير او تزيل العلامات، و list-style-position تتحكم في ما اذا كانت العلامات داخل او خارج تدفق المحتوى، و padding و margin تضبط التباعد. من اكثر الانماط شيوعا في تطوير الويب استخدام قائمة غير منسقة لقوائم التنقل.

<nav>
  <ul class="nav-menu">
    <li><a href="/">الرئيسية</a></li>
    <li><a href="/about">من نحن</a></li>
    <li><a href="/services">الخدمات</a></li>
    <li><a href="/contact">التواصل</a></li>
  </ul>
</nav>

<style>
  .nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
  }
  .nav-menu a {
    text-decoration: none;
    color: #2c3e50;
    font-weight: bold;
  }
  .nav-menu a:hover {
    color: #3498db;
  }
</style>

انماط القوائم في العالم الحقيقي

تظهر القوائم في كل مكان على الويب الحديث. التنقل بمسار التصفح يستخدم القوائم المرتبة لان المسار له تسلسل محدد. خلاصات وسائل التواصل الاجتماعي هي قوائم غير مرتبة من المنشورات. فلاتر منتجات التجارة الالكترونية تستخدم قوائم غير مرتبة من مربعات الاختيار. صفحات الاسئلة الشائعة تستخدم القوائم الوصفية حيث الاسئلة مصطلحات والاجابات اوصاف. سلاسل التعليقات تستخدم قوائم غير مرتبة متداخلة لاظهار تسلسل الردود. التعرف على هذه الانماط يساعدك في كتابة HTML انظف واكثر دلالية.