القوائم في HTML
قوائم المكونات وروتين الصباح ونقاط الميزات وقوائم التعبئة أسهل للمسح كـقوائم. يمنحك HTML بنيتين يوميتين: قوائم غير مرتبة وقوائم مرتبة. بعد تحذير الإضافات (تاريخ بلا عينات كود)، تعود هذه الجلسة إلى ترميز عملي ستعيد استخدامه في معظم صفحات المحتوى. فكّر بالقوائم كمعنى للمجموعات والتسلسلات — لا كاختصار لتخطيط متعدد الأعمدة.
ما فائدة القوائم
القائمة تعلّم مجموعة عناصر مرتبطة كمجموعة. يمكن للمتصفحات وتقنيات المساعدة أن تعلن عدد العناصر وتنتقل بينها واحدًا واحدًا. تساعد هذه البنية على التصفح السريع والمخططات والوصفات. يختفي المعنى إن زيّفت النقاط بشرطات عشوائية في فقرات عادية، أو مددت ul فقط لدفع النص إلى أعمدة بصرية. اختر ترميز القائمة عندما يكون المحتوى فعلًا مجموعة أو تسلسلًا. اترك التباعد الزخرفي وشبكة التخطيط لـ CSS لاحقًا.
إجابة مباشرة
ul— قائمة غير مرتبة (نقاط افتراضيًا في المتصفح)ol— قائمة مرتبة (أرقام افتراضيًا)li— كل عنصر قائمة
ضعulأوolآخر داخلliعندما تحتاج عناصر فرعية. لا تتركliعائمًا خارج قائمته الأم. يجب أن تغلق الوسوم بترتيب عكسي لفتحها، خاصة بعد إضافة قائمة فرعية تحت خطوة واحدة.
متى تستخدم أي قائمة
اختر العنصر الذي يطابق الفكرة التي تكتبها، لا المظهر الذي تأمل أن يضيفه CSS لاحقًا. النقاط والأرقام عروض افتراضية؛ قرار HTML هو ما إذا كان الترتيب جزءًا من المعنى.
📊 ul مقابل ol للمبتدئين
| Need | Prefer | Why |
|---|---|---|
| عناصر مرتبطة بلا تسلسل مطلوب | ul | الترتيب ليس جزءًا من المعنى |
| خطوات أو ترتيب أو تعليمات بالترتيب | ol | التسلسل جزء من المعنى |
| نقاط فرعية تحت عنصر واحد | nest ul/ol داخل ذلك li | يحافظ على التسلسل الهرمي بأمانة |
| أعمدة الصفحة أو تخطيط الشريط الجانبي | ليست القوائم وحدها | استخدم CSS والتخطيط الهيكلي لاحقًا |
القائمة غير المرتبة
قائمة تسوق بالنقاط هي العرض الكلاسيكي لـ ul. كل عنصر هو li. ابدأ هنا عندما تكون العناصر نظراء — أسماء فواكه أو تسميات هوايات أو ميزات يمكن خلطها دون كسر الدرس.
Unordered list
html<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>قراءة عينة غير المرتبة
ulيفتح حاوية القائمة غير المرتبة- كل
liعنصر واحد في تلك المجموعة - يجب أن تتداخل وسوم الإغلاق بشكل صحيح: أنهِ كل
liقبل إغلاقul - النقاط الافتراضية نمط متصفح؛ يمكن لـ CSS لاحقًا تغيير العلامات، لكن معنى HTML يبقى «مجموعة غير مرتبة»
- عناصر
liالفارغة والإغلاق الناقص أخطاء شائعة — اعرض الصفحة مبكرًا لاكتشافها
قائمة مرتبة مع قائمة فرعية متداخلة
غالبًا تحتاج الخطوات المرقمة مجموعة نقاط صغيرة تحت خطوة واحدة — ملفات للإنشاء أو أدوات للفتح أو مكونات لتلك الخطوة فقط. ضع القائمة الداخلية داخل li تلك الخطوة، لا كشقيقة بجانب ol كله. تبقى الأرقام الخارجية مقروءة بينما توضح النقاط الداخلية التفاصيل.
Ordered list with a nested list
html<ol>
<li>Open the editor</li>
<li>
Create files
<ul>
<li>index.html</li>
<li>styles.css</li>
</ul>
</li>
<li>Save and refresh</li>
</ol>قراءة العينة المتداخلة
olالخارجي يرقّم الخطوات الرئيسية بالتسلسلliالثاني يحتوي نصًا تمهيديًا بالإضافة إلىulفرعي- عناصر
liالداخلية تنتمي إلىulالمتداخل؛ يُغلق ذلكulقبل إغلاقliالأب - الخطوة الثالثة تواصل التسلسل المرتب الخارجي بعد انتهاء الكتلة المتداخلة
- يتوسع هذا النمط لتداخل أعمق، لكن أبقِ أشجار المبتدئين ضحلة حتى يبقى ترتيب الفتح/الإغلاق واضحًا
- إذا بدت الأرقام «خاطئة»، تحقق مما إذا أُغلق
liمبكرًا ودفع القائمة المتداخلة للخارج
المعنى أولًا، التنسيق لاحقًا
يرسم المتصفح النقاط والأرقام دون CSS إضافي. يغري هذا الراحة بإساءة استخدام القوائم كآلات مسافة بادئة أو أشرطة جانبية مزيفة. قاوم ذلك هنا. إن كان المحتوى مجموعة أو تسلسلًا، فترميز القائمة هو الخيار الدلالي الصحيح حتى قبل إعادة تنسيق العلامات. إن احتجت بطاقات جنبًا إلى جنب أو شبكة شريط تنقل أو أعمدة مجلة، انتظر دروس CSS والتخطيط الهيكلي — لا تحوّل ul إلى إطار صفحة لمجرد أن القوائم تظهر لاحقًا في القوائم بعناية.
إمكانية الوصول وعادات المسح
تساعد القوائم على المسح وتساعد التقنيات المساعدة على عبارات مثل «قائمة من ثلاثة عناصر». ركّز كل li على فكرة واحدة قدر الإمكان. تجنب حشو فقرات كبيرة غير مرتبطة في كل عنصر ما لم يحتج المحتوى ذلك حقًا. تداخل فقط عندما يكون التسلسل الهرمي حقيقيًا — التداخل المزيف لمجرد المسافة البادئة يربك البشر والأدوات. عنوان قصير فوق القائمة غالبًا يوضح موضوع المجموعة قبل أول نقطة.
تمرين في المحرر
- اصنع
ulمن ثلاث هوايات (أو ثلاثة أطعمة — أبقِ العناصر قصيرة). - اصنع
olمن ثلاث خطوات صباحية بالترتيب الذي تفعلها فعلًا. - تداخل
ulصغيرًا تحت أحد تلكli(مثل ملفات للفتح أو أدوات للإمساك). - تحقق ذهنيًا: كل
liداخلulأوol؛ القوائم المتداخلة داخلli. - بدّل نوع قائمة واحدة (
ul↔ol) واسأل إن كان المعنى ما زال يناسب المحتوى. - اعرض الصفحة في المتصفح وتأكد من ظهور النقاط/الأرقام دون كتابة أي CSS بعد.
- اكسر التداخل عمدًا مرة، لاحظ كيف يبدو المخطط خاطئًا، ثم أصلح الإغلاق.
أخطاء سهلة
- كتابة
liخارج أيul/ol(عناصر يتيمة) - استخدام القوائم فقط لمسافة بادئة لفقرات عشوائية أو أعمدة مزيفة
- نسيان إغلاق القوائم المتداخلة بالترتيب الصحيح
- وضع
ulمتداخل كشقيقة لـliبدل داخلliواحد - اختيار
olلعناصر بلا تسلسل (أوulلأرقام خطوات صارمة) دون التفكير بالمعنى - نسخ ترميز قائمة من دروس تخطيط فقط تعامل
ulكشبكة قائمة دون تعليم الدلالة أولًا - ترك القائمة الخارجية غير مغلقة بعد كتلة متداخلة طويلة
ملخص
ul+liللمجموعات غير المرتبة (نقاط افتراضيًا)ol+liللتسلسلات المرتبة (أرقام افتراضيًا)- تداخل قائمة فرعية داخل
li، لا بجانب القائمة الأم - اختر نوع القائمة الذي يطابق المعنى
- لا تستخدم القوائم بديلًا لأعمدة تخطيط CSS
- بعد ملاحظة تاريخ الإضافات، تعيدك القوائم إلى HTML هيكلي يومي ستستمر بإعادة استخدامه
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى