شرح العنصر (dl) في HTML
يُمثل عنصر HTML <dl> "قائمة وصف". ويُستخدم لعرض قائمة بالمصطلحات وأوصافها أو تعريفاتها المقابلة. ستجد هذا العنصر مُستخدمًا في قوائم المصطلحات، أو البيانات الوصفية، أو أي حالة تتطلب قائمة بالمصطلحات وشرحها.
مقدمة
في عالم تطوير الويب، تقدم HTML مجموعة متنوعة من العناصر لتنظيم وعرض المحتوى. من بين هذه العناصر، يبرز <dl> كأداة قوية لعرض البيانات الزوجية والمعلومات المرتبطة.
ما هو عنصر <dl>؟
<dl> هو اختصار لـ Description List أو قائمة الوصف. وهو عنصر حاوٍ يستخدم لإنشاء قوائم من المصطلحات وتعريفاتها.
التاريخ والتطور
- HTML 2.0 (1995): تم تقديم
<dl>لأول مرة - HTML 4.01 (1999): تم توحيد سلوك العنصر
- HTML5 (2014): تم توسيع استخداماته
التركيب التشريحي للعنصر
<dl>
<dt>المصطلح الأول</dt>
<dd>تعريف المصطلح الأول</dd>
<dt>المصطلح الثاني</dt>
<dd>التعريف الأول</dd>
<dd>التعريف الثاني (اختياري)</dd>
</dl>العناصر الفرعية
<dt> (Description Term)
- الغرض: يمثل المصطلح أو العنصر الذي سيتم وصفه
- المحتوى المسموح: النص والعناصر النصية
- لا يقبل عناصر كتلية مثل
<p>
<dd> (Description Definition)
- الغرض: يحتوي على الوصف أو التعريف
- يقبل النص والعناصر النصية والكتلية
- يمكن أن يحتوي على فقرات، صور، قوائم أخرى
أمثلة تطبيقية
قائمة مصطلحات تقنية
- HTML
- لغة ترميز النص التشعبي لإنشاء صفحات الويب
- CSS
- لغة تنسيق لوصف مظهر مستند HTML
- JavaScript
- لغة برمجة لتقديم صفحات ويب تفاعلية
الأسئلة الشائعة (FAQ)
- كيف أسجل حسابًا جديدًا؟
- اضغط على زر التسجيل واملأ النموذج
- ما هي طرق الدفع المتاحة؟
- نقبل البطاقات الائتمانية وPayPal
التنسيق باستخدام CSS
تنسيق أساسي
dl {
margin: 1em 0;
line-height: 1.5;
}
dt {
font-weight: bold;
margin-top: 1em;
}
dd {
margin-left: 2em;
margin-bottom: 1em;
}تنسيق أفقي
dl.horizontal {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.5em 1em;
}
dl.horizontal dt {
grid-column: 1;
}
dl.horizontal dd {
grid-column: 2;
}أفضل الممارسات
- استخدم
<dl>فقط للبيانات الزوجية - حافظ على ترتيب منطقي بين
<dt>و<dd> - استخدم CSS للتنسيق بدلاً من الاعتماد على التنسيق الافتراضي
- ضع إمكانية الوصول في الاعتبار
