قوائم HTML: كيفية استخدام التعداد النقطي والقوائم المرتبة وغير المرتبة

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

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

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

توفّر HTML ثلاثة أنواع رئيسية من القوائم، ولكل نوع استخدام مناسب بحسب طبيعة المحتوى:

• القائمة المرتبة: تُستخدم عندما يكون ترتيب العناصر مهماً، مثل الخطوات أو التصنيفات أو الترتيب الزمني.
• القائمة غير المرتبة: تُستخدم عندما لا يكون ترتيب العناصر عاملاً مؤثراً، مثل قوائم الموارد أو المهام أو الميزات.
• قائمة الوصف: تُستخدم لعرض مصطلح مع شرحه، وهي مفيدة في القواميس المصغرة أو الأسئلة الشائعة أو تعريف المفاهيم.

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

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

<ol>
  <li>Eat</li>
  <li>Code</li>
  <li>Sleep</li>
</ol>

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

تخصيص نوع الترقيم في القائمة المرتبة

لا تقتصر القوائم المرتبة على الأرقام فقط. يمكنك تغيير شكل الترقيم باستخدام السمة type داخل الوسم <ol>.

إذا أردت استخدام الأحرف الإنجليزية الكبيرة مثل A وB وC، فاكتب:

<ol type="A">
  <li>Eat</li>
  <li>Code</li>
  <li>Sleep</li>
</ol>

أما إذا رغبت باستخدام الأحرف الصغيرة مثل a وb وc:

<ol type="a">
  <li>Eat</li>
  <li>Code</li>
  <li>Sleep</li>
</ol>

كما يمكنك استخدام الأرقام الرومانية الكبيرة عبر القيمة I:

<ol type="I">
  <li>Eat</li>
  <li>Code</li>
  <li>Sleep</li>
</ol>

البدء من رقم مخصص باستخدام السمة start

في بعض الحالات، قد تحتاج إلى متابعة ترقيم سابق بدلاً من البدء من الرقم 1. هنا تأتي فائدة السمة start، إذ تتيح لك بدء القائمة من قيمة محددة.

<ol start="30">
  <li>Thirty</li>
  <li>Thirty One</li>
  <li>Thirty Two</li>
</ol>

هذا الأسلوب مفيد عند تقسيم محتوى طويل إلى أجزاء أو متابعة تعداد في أكثر من موضع داخل الصفحة.

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

إذا لم يكن لترتيب العناصر أهمية واضحة، فإن القائمة غير المرتبة هي الخيار الأفضل. يتم إنشاؤها باستخدام الوسم <ul>، بينما تُكتب العناصر داخل الوسم <li>.

My Favorite Web Development Learning Sites
<div>
  <ul>
    <li>freeCodeCamp</li>
    <li>CSS-Tricks</li>
    <li>Traversy Media</li>
  </ul>
</div>

تظهر عناصر هذا النوع من القوائم عادةً مع نقاط سوداء افتراضياً، وهو ما يجعلها مناسبة لعرض الموارد، الملاحظات، أو العناصر العامة.

إضافة روابط داخل عناصر القائمة

يمكنك دمج الروابط داخل عناصر القائمة باستخدام الوسم <a>، وهي طريقة شائعة جداً في بناء القوائم التنقلية أو صفحات الموارد.

My Favorite Web Development Learning Sites
<div>
  <ul>
    <li><a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a></li>
    <li><a href="https://css-tricks.com/" target="_blank">CSS-Tricks</a></li>
    <li><a href="https://www.traversymedia.com/" target="_blank">Traversy Media</a></li>
  </ul>
</div>

هذا النمط مفيد عند إنشاء قائمة مصادر تعليمية أو روابط صفحات داخلية أو قائمة تنقل رئيسية داخل الموقع.

تخصيص شكل النقاط في القوائم غير المرتبة

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

هذا التخصيص مفيد جداً عندما تريد مواءمة القوائم مع هوية التصميم، أو عندما تحتاج إلى تحويل القائمة إلى شريط تنقل بلا نقاط.

قائمة الوصف في HTML: النوع الأقل استخداماً لكنه مهم

إلى جانب القوائم المرتبة وغير المرتبة، توفر HTML نوعاً ثالثاً يُعرف باسم قائمة الوصف. يتم إنشاؤها باستخدام الوسم <dl>، ويُستخدم الوسم <dt> لكتابة المصطلح، ثم الوسم <dd> لكتابة الشرح أو الوصف المرتبط به.

<dl>
  <dt>Coding</dt>
  <dd>An activity to keep you happy, even in sleep.</dd>

  <dt>Gossiping</dt>
  <dd>Can't live without it.</dd>

  <dt>Sleeping</dt>
  <dd>My all time favorite.</dd>
</dl>

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

استخدام عملي: إنشاء رأس صفحة بواسطة القوائم

من أكثر الاستخدامات العملية شيوعاً للقوائم غير المرتبة بناء شريط تنقل داخل رأس الصفحة. في هذا المثال سننشئ قائمة تنقل بسيطة تتضمن شعاراً وثلاثة روابط: Home وProducts وAbout Us.

<nav>
  <span class="logo">Logo</span>
  <ul>
    <li><a href="#/home">Home</a></li>
    <li><a href="#/products">Products</a></li>
    <li><a href="#/about">About Us</a></li>
  </ul>
</nav>

في هذه البنية تم استخدام <ul> لتجميع روابط التنقل، بينما يمثّل العنصر <span> مكان الشعار النصي بشكل مبدئي.

لكن هذا الشكل الخام لا يكفي ليبدو كرأس صفحة احترافي، لذا نلجأ إلى بعض قواعد CSS لتحسين المظهر:

nav {
  background-color: #273032;
  color: #FFF;
  padding: 10px;
  display: flex;
}

.logo {
  background-color: blue;
}

ul {
  margin: 0px;
}

li {
  list-style: none;
  display: inline;
  margin-right: 0.2rem;
}

a {
  color: pink;
}

بعد تطبيق هذه الأنماط، يصبح شكل الترويسة أقرب إلى شريط تنقل حقيقي يمكن البناء عليه وتطويره لاحقاً.

أفضل الممارسات عند استخدام القوائم في صفحات الويب

• استخدم <ol> فقط عندما يكون ترتيب العناصر مهماً فعلاً.
• استخدم <ul> للمحتوى العام الذي لا يعتمد على التسلسل.
• استفد من <dl> عندما تعرض تعريفات أو أوصافاً مرتبطة بمصطلحات محددة.
• تجنب استخدام القوائم لأغراض شكلية بحتة إذا كان العنصر لا يمثل مجموعة منطقية.
• احرص على أن تكون عناصر القائمة واضحة ومختصرة وسهلة المسح البصري، خاصة على الجوال.
• عند بناء قوائم تنقل، اجمع بين الدلالة الصحيحة في HTML والتنسيق المناسب في CSS.

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

تُعد القوائم في HTML من أكثر العناصر بساطة في الشكل، لكنها من أكثرها تأثيراً في تنظيم المحتوى وتحسين قابلية القراءة وبناء واجهات مفهومة دلالياً. الاختيار بين <ol> و<ul> و<dl> يجب أن يعتمد على طبيعة البيانات نفسها، لا على الشكل البصري فقط. وكلما كان استخدامك لهذه الوسوم أكثر دقة، أصبحت بنية الصفحة أوضح لمحركات البحث وأسهل للمستخدمين وتقنيات الوصول.