قوائم HTML
تنظم القوائم المحتوى ذا الصلة. يوفر HTML ثلاثة أنواع: القوائم غير المرتبة (نقاط)، القوائم المرتبة (مرقمة)، و قوائم التعريف (مصطلح + وصف).
القوائم غير المرتبة
<ul> (قائمة غير مرتبة) مع <li> (عنصر قائمة) تنشئ قوائم نقطية — مثالية للقوائم والفئات وقوائم الميزات والمحتوى الآخر بدون تسلسل مطلوب:
مثال
HTML
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
القوائم المرتبة
<ol> (قائمة مرتبة) تنشئ عناصر مرقمة — مثالية للتعليمات خطوة بخطوة والترتيبات والأدلة الإجرائية:
HTML
<ol>
### مثال
<li>افتح محررك</li>
<li>اكتب بعض HTML</li>
<li>احفظ كملف .html</li>
<li>افتح في المتصفح</li>
</ol>
📌 القوائم المتداخلة: يمكن أن تتداخل القوائم داخل بعضها البعض — ضع
<ul> أو <ol> داخل <li> لإنشاء تسلسلات هرمية متعددة المستويات. قوائم التنقل المنسدلة متعددة المستويات تُبنى باستخدام القوائم المتداخلة.
قوائم التعريف
<dl> (قائمة تعريف) تحتوي على سلسلة من <dt> (مصطلحات) و <dd> (أوصاف)، مثالية للمسارد والبيانات الوصفية وأسئلة وأجوبة:
HTML
<dl>
<dt>HTML</dt>
### مثال
<dd>لغة ترميز النص التشعبي، الهيكل العظمي لصفحات الويب</dd>
<dt>CSS</dt>
<dd>أوراق الأنماط المتتالية، تتحكم في مظهر صفحات الويب</dd>
</dl>
القوائم القابلة للطي
<details> و <summary> هما وسما HTML5 لإنشاء كتل محتوى قابلة للتمدد/الطي — شائعة الاستخدام لأقسام الأسئلة الشائعة وقوائم التوثيق القابلة للطي. انقر على عنوان <summary> لتبديل حالة التمدد/الطي:
HTML
<details>
<summary>ما هو HTML؟</summary>
<p>HTML هي لغة ترميز النص التشعبي المستخدمة لإنشاء صفحات الويب.</p>
### مثال
</details>
<details open>
<summary>ما هو CSS؟</summary>
<p>يتحكم CSS في تنسيق وتخطيط صفحات الويب.</p>
</details>
📌 سمة open: إضافة سمة
open إلى <details> تجعل المحتوى موسعًا افتراضيًا (مع open = موسع؛ بدون = مطوي). يضيف المتصفح تلقائيًا سهم تمدد/طي إلى <summary> — لا حاجة إلى CSS أو JavaScript إضافي.
❓ أسئلة شائعة
س ما الفرق بين
<ul> و <ol>؟ متى أستخدم كل منهما؟ج
<ul> هي قائمة غير مرتبة — تُعلم بنقاط أو مربعات أو رموز أخرى — مناسبة للعناصر بدون تسلسل، مثل قوائم التنقل وقوائم الموارد والنقاط الرئيسية. <ol> هي قائمة مرتبة — تُعلم بأرقام أو حروف — مناسبة للعناصر ذات التسلسل المحدد، مثل التعليمات خطوة بخطوة والتصنيفات ومخططات البرنامج التعليمي. الاختيار يعتمد على ما إذا كانت العناصر لها علاقة تسلسلية.س هل يمكن تداخل القوائم؟ كم مستوى من العمق؟
ج نعم، ואין حد. ضع
<ul> أو <ol> داخل <li> لإنشاء قوائم فرعية. السيناريوهات الشائعة: دليل متعدد المستويات، قوائم شجرية، هياكل مخطط. ومع ذلك، يُوصى بالحفاظ على 3-4 مستويات كحد أقصى — التداخل العميق يضر بقابلية القراءة ويعرض بشكل سيئ على الأجهزة المحمولة. يمكنك خلط <ul> و <ol> عند التداخل، مثل خارجي مرتب مع داخلي غير مرتب.س ما هي قائمة التعريف
<dl>؟ كيف تختلف عن <ul>/<ol>؟ج
<dl> (قائمة التعريف) مصممة لأزواج المصطلح-الوصف، مكونة من <dt> (مصطلح) و <dd> (وصف). السيناريوهات النموذجية: الأسئلة الشائعة، glossaries، مواصفات المنتج، البيانات الوصفية. <ul>/<ol> هي مجموعات من "عناصر القائمة"، بينما <dl> هي مجموعة من "أزواج المفتاح-القيمة". في HTML5، يمكن أيضًا استخدام <dl> لمعلومات المؤلف وتفاصيل الاتصال والبيانات الوصفية الأخرى.📖 ملخص
<ul>قائمة غير مرتبة +<li>عناصر قائمة (نقاط)<ol>قائمة مرتبة +<li>عناصر قائمة (مرقمة)<dl>قائمة تعريف +<dt>مصطلح +<dd>وصف<details>+<summary>قائمة قابلة للطي؛ سمةopenتتحكم في التمدد الافتراضي- يمكن أن تتداخل القوائم لإنشاء هياكل متعددة المستويات
📝 تمارين
- ابنِ قائمة: استخدم قائمة غير مرتبة لإنشاء قائمة تنقل للموقع مع روابط للرئيسية والمنتجات ومن نحن واتصل بنا.
- قوائم متداخلة: أنشئ قائمة متداخلة: قائمة خارجية مرتبة (خطوات) مع قائمة داخلية غير مرتبة (ملاحظات لكل خطوة).