كيفية إنشاء القوائم النقطية في HTML باستخدام وسم

تُعدّ القوائم من أكثر العناصر استخداماً في حياتنا اليومية، فهي تساعدنا على تنظيم المهام، وترتيب الخطوات، وتبسيط عرض المعلومات. وينطبق الأمر نفسه على تطوير الواجهات الأمامية، حيث تُستخدم القوائم في HTML لتنظيم المحتوى وعرضه بصورة واضحة وسهلة الفهم.

توجد في HTML ثلاثة أنواع رئيسية من القوائم:

• القوائم غير المرتبة Unordered Lists
• القوائم المرتبة Ordered Lists
• قوائم الوصف Description Lists

في هذا المقال، سنركز على القوائم غير المرتبة، ونتعرف على كيفية إنشائها باستخدام وسم ul، إلى جانب استعراض أشهر طرق تنسيقها باستخدام CSS.

ما هي القوائم غير المرتبة في HTML؟

القائمة غير المرتبة في HTML هي مجموعة من العناصر التي لا يشترط عرضها بترتيب رقمي أو تسلسلي. وغالباً ما تظهر هذه العناصر افتراضياً على شكل نقاط Bullet Points.

لإنشاء هذا النوع من القوائم، نستخدم الوسم ul، ثم نضع داخلَه عناصر القائمة باستخدام الوسم li. ويُعدّ ul العنصر الأب، بينما يكون li هو العنصر الابن المباشر له.

مثال على إنشاء قائمة غير مرتبة

<ul>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ul>

النتيجة الافتراضية ستكون قائمة تحتوي على نقاط بجانب كل عنصر.

قاعدة مهمة عند استخدام وسم ul

من الضروري الانتباه إلى أن الوسم li هو الابن المباشر الوحيد المسموح به داخل ul. وهذا يعني أنه لا يجب إدراج عناصر مثل a مباشرة داخل القائمة دون تغليفها داخل li.

مثال غير صحيح

<ul>
  <a href="#">I am a link to something on the web!</a>
</ul>

الطريقة الصحيحة لإضافة رابط داخل القائمة

<ul>
  <li>
    <a href="#">I link to somewhere on the web!</a>
  </li>
</ul>

في هذه الحالة، يكون الوسم a ابناً للوسم li، وليس للوسم ul بشكل مباشر. وهذا يضمن صحة البنية الدلالية للكود.

كيفية إنشاء قائمة غير مرتبة متداخلة

القائمة المتداخلة Nested List هي قائمة توجد داخل عنصر من عناصر قائمة أخرى. ويمكن استخدام هذا الأسلوب لعرض تصنيفات فرعية أو مستويات إضافية من المعلومات.

عند إنشاء قائمة متداخلة، تذكّر دائماً أن تضع القائمة الجديدة داخل عنصر li من القائمة الأساسية.

مثال على قائمة غير مرتبة متداخلة

<ul>
  <!-- start of main list-->
  <li>HTML</li>
  <li>CSS</li>
  <li>
    JavaScript
    <ul>
      <!-- start of nested list-->
      <li>Angular</li>
      <li>React</li>
      <li>Vue</li>
    </ul>
    <!-- end of nested list-->
  </li>
</ul>
<!-- end of main list -->

استخدام التعليقات داخل الكود يساعد كثيراً على فهم أماكن بداية القوائم المتداخلة ونهايتها، خاصة عندما تصبح البنية أكثر تعقيداً. كما يُفضّل استخدام هذا النوع من القوائم فقط عندما يكون له معنى دلالي واضح داخل المحتوى.

كيفية تغيير التنسيق الافتراضي للقوائم غير المرتبة

بشكل افتراضي، تستخدم القوائم غير المرتبة نمط النقاط الدائرية الممتلئة. لكن يمكن تعديل هذا السلوك بسهولة باستخدام الخاصية list-style-type داخل ملف CSS.

القيمة الافتراضية لهذه الخاصية هي disc.

استخدام دوائر فارغة بدلاً من النقاط الممتلئة

<ul>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ul>

ul {
  list-style-type: circle;
}

استخدام مربعات كنمط للعناصر

<ul>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ul>

ul {
  list-style-type: square;
}

إزالة التنسيق الافتراضي بالكامل

<ul>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ul>

ul {
  list-style-type: none;
}

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

كيفية عرض عناصر القائمة أفقياً

بما أن القوائم عناصر كتلية Block Elements بطبيعتها، فإن العناصر تظهر أسفل بعضها. لكن يمكن تغيير ذلك باستخدام Flexbox وبعض قواعد التنسيق الإضافية.

الكود المستخدم

<ul>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ul>

ul {
  list-style-type: square;
  display: flex;
}

li {
  display: block;
  margin: 10px;
}

بهذا الشكل ستظهر العناصر جنباً إلى جنب بدلاً من عرضها عمودياً.

كيفية تخصيص عناصر القائمة باستخدام Emojis

إذا كنت ترغب في جعل القوائم أكثر جاذبية من الناحية البصرية، يمكنك استخدام Emojis بدلاً من العلامات التقليدية. ويتم ذلك عبر العنصر الوهمي ::before في CSS.

كود HTML

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

إضافة Emoji موحّد لكل العناصر

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li::before {
  content: "💻";
}

إضافة Emoji مختلف لكل عنصر

إذا أردت تخصيص رمز مختلف لكل عنصر، يمكنك الاستفادة من المحدد :nth-child() مع ::before.

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* first list item */
li:nth-child(1)::before {
  content: "✍️";
}

/* second list item */
li:nth-child(2)::before {
  content: "🎨";
}

/* third list item */
li:nth-child(3)::before {
  content: "🔥";
}

أفضل ممارسات استخدام القوائم غير المرتبة في HTML

• استخدم ul فقط عندما لا يكون الترتيب مهماً.
• تأكد من أن جميع العناصر داخل القائمة مغلّفة بوسم li.
• استخدم القوائم المتداخلة عند وجود علاقة منطقية بين العناصر الرئيسية والفرعية.
• لا تفرط في التنسيق على حساب الدلالة الهيكلية للمحتوى.
• احرص على أن يكون التصميم النهائي سهل القراءة ومتوافقاً مع تجربة المستخدم.

الخلاصة التقنية

يُعدّ وسم ul من العناصر الأساسية في HTML، لأنه يوفّر طريقة دلالية ومنظمة لعرض البيانات غير المرتبة. ومع دمجه مع li وخصائص CSS مثل list-style-type وFlexbox و::before، يمكن تحويل قائمة بسيطة إلى عنصر واجهة مرن واحترافي. من الناحية التقنية، أفضل استخدام القوائم غير المرتبة عندما يكون الهدف هو الوضوح البنيوي وسهولة التخصيص دون التضحية بصحة الكود أو تجربة المستخدم.