القوائم في HTML: شرح القوائم غير المرتبة والمرتبة للمبتدئين

القوائم في HTML: شرح ul و ol و li للمبتدئين

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

ما هي القوائم في HTML؟

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

أنواع القوائم في HTML

توجد ثلاثة أنواع رئيسية من القوائم في HTML: القوائم غير المرتبة، القوائم المرتبة، وقوائم الوصف. في هذا المقال سنركز على النوعين الأكثر استخدامًا، وهما ul و ol.

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

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

وسم li ودوره في القوائم

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

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

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

في هذا المثال تظهر العناصر بنقاط، وهو الشكل الافتراضي للقائمة غير المرتبة.

القائمة المرتبة ol

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

مثال على قائمة مرتبة

<ol>
  <li>تعلم HTML</li>
  <li>تعلم CSS</li>
  <li>تعلم JavaScript</li>
</ol>

يعرض هذا المثال العناصر بأرقام مرتبة، مما يسهل متابعة الخطوات بالترتيب الصحيح.

استخدام القوائم في المواقع

تُستخدم القوائم في إنشاء القوائم العلوية للمواقع، القوائم الجانبية، وقوائم المقالات. كما تُعتبر عنصرًا أساسيًا في بناء واجهات المستخدم. بعد إنشاء القوائم باستخدام HTML، يمكن تنسيقها باستخدام CSS.

أخطاء شائعة عند استخدام القوائم

من الأخطاء الشائعة وضع نصوص مباشرة داخل ul أو ol بدون استخدام li، أو استخدام القوائم في غير مكانها. تفادي هذه الأخطاء يجعل الكود منظمًا وسهل القراءة.

مصادر لتعلم القوائم في HTML

للتعمق أكثر يمكنك الرجوع إلى التوثيق الرسمي في MDN Web Docs أو موقع W3Schools .

خلاصة

القوائم من العناصر الأساسية في HTML، وتساعد على تنظيم المحتوى بشكل احترافي. فهم ul و ol و li يساعدك على بناء صفحات واضحة وسهلة الاستخدام، وهو خطوة مهمة في طريق تعلم تصميم المواقع.

⬅️ العودة إلى الصفحة الرئيسية

آخر الأخبار

القوائم في HTML: شرح القوائم غير المرتبة والمرتبة للمبتدئين