HTML / قوائم الوصف
مفهوم قوائم الوصف
قائمة الوصف (Description List) تُستخدم لعرض مجموعة من المصطلحات، حيث يحتوي كل مصطلح على وصف خاص به. تعتبر قوائم الوصف طريقة فعالة لتنظيم المعلومات بطريقة مفهومة. في هذا النوع من القوائم، يتم عرض المصطلح مباشرةً في أول السطر، بينما يتم إبعاد الوصف قليلاً عن بداية السطر ليبدو تابعًا للمصطلح الموجود قبله.
على سبيل المثال، إذا كان لديك مصطلح "قهوة"، يمكنك إضافة وصف يوضح نوع القهوة أو طريقة تحضيرها.
إضافة قائمة وصف
لعرض قائمة وصف في الصفحة، نستخدم الوسوم التالية:
<dl></dl>هو الوسم الأساسي الذي يجب وضعه لإعلام المتصفح أنك تريد عرض البيانات بداخل قائمة وصف. هذا الوسم ينشئ حاوية لقائمة الوصف.<dt></dt>تُستخدم لإضافة مصطلح أو عنوان لما سيوضع تحته في القائمة. يمكن أن تكون هذه المصطلحات أي شيء، مثل "مشروبات ساخنة" أو "فواكه".<dd></dd>تُستخدم لإضافة شرح للمصطلح أو خيار يندرج تحته. هذا هو المكان الذي يمكنك فيه وضع تفاصيل أو معلومات إضافية تتعلق بالمصطلح الموجود في الوسم<dt>.
مثال على قائمة الوصف
في المثال التالي، قمنا بإضافة قائمة وصف تحتوي على عنوانين وخمس خيارات:
<!DOCTYPE html>
<html>
<body>
<p>The following items are inside a description list:</p>
<!-- حتى يعرف المتصفح أننا سنقوم بتعريف قائمة وصف <dl> قمنا بوضع كل العناصر بداخل -->
<dl>
<dt>Hot Drinks</dt>
<dd>- Nescafe</dd>
<dd>- Coffee</dd>
<dd>- Tee</dd>
<br> <!-- هنا أضفنا سطر فارغ لإظهار المحتوى بشكل أفضل -->
<dt>Cold Drinks</dt>
<dd>- Pesi</dd>
<dd>- Red Bull</dd>
</dl>
</body>
</html>
شرح العناصر المستخدمة في قائمة الوصف
1. الوسم <dl>
يعتبر الوسم <dl> (وهو اختصار لـ Description List) هو الوسم الرئيسي الذي يستخدم لتحديد بداية ونهاية قائمة الوصف. كل ما يتم وضعه داخل هذا الوسم سيتم اعتباره جزءًا من قائمة الوصف. عند استخدام هذا الوسم، يجب أن تتأكد من أنك تستخدمه مع الوسوم الأخرى المخصصة للمصطلحات والأوصاف.
2. الوسم <dt>
الوسم <dt> يُستخدم للإشارة إلى المصطلح أو العنوان الذي سيتم وصفه. هذا المصطلح يمكن أن يكون أي شيء، مثل اسم منتج أو مفهوم معين. عند استخدام هذا الوسم، يتم عرض المصطلح في السطر الأول، مما يجعله بارزًا عن الوصف. على سبيل المثال، إذا كنت تتحدث عن "مشروبات ساخنة"، يمكنك استخدام هذا الوسم لعرض هذا العنوان.
3. الوسم <dd>
الوسم <dd> يُستخدم لوصف المصطلح الذي تم ذكره في الوسم <dt>. يمكن أن يتضمن هذا الوصف معلومات إضافية، مثل الأنواع المختلفة للمنتجات أو تفاصيل عن المصطلح. على سبيل المثال، إذا كان المصطلح هو "قهوة"، يمكن أن يكون الوصف "قهوة سوداء، قهوة بالحليب، قهوة مثلجة" وهكذا. يعتبر هذا الوسم مهمًا لأنه يوفر معلومات تفصيلية للمستخدمين حول المصطلح.
تطبيق عملي على قوائم الوصف
عند استخدام قوائم الوصف، يمكنك تنظيم المعلومات بطريقة تجعل من السهل على المستخدمين فهم المحتوى. على سبيل المثال، إذا كنت تقوم بإنشاء قائمة بالمشروبات، يمكنك استخدام قوائم الوصف لعرض الأنواع المختلفة من المشروبات، مما يجعل المعلومات أكثر وضوحًا وسهولة في الوصول إليها.
مثال آخر على قائمة وصف
في المثال التالي، سنعرض قائمة وصف تتعلق بالفواكه:
<!DOCTYPE html>
<html>
<body>
<p>The following items are inside a description list:</p>
<!-- حتى يعرف المتصفح أننا سنقوم بتعريف قائمة وصف <dl> قمنا بوضع كل العناصر بداخل -->
<dl>
<dt>Fruits</dt>
<dd>- Apple</dd>
<dd>- Banana</dd>
<dd>- Orange</dd>
<br> <!-- هنا أضفنا سطر فارغ لإظهار المحتوى بشكل أفضل -->
<dt>Cold Drinks</dt>
<dd>- Strawberry</dd>
<dd>- Blueberry</dd>
</dl>
</body>
</html>
استنتاجات
تعتبر قوائم الوصف أداة قوية لتنظيم المعلومات وتقديمها بشكل واضح ومرتب. من خلال استخدام الوسوم المناسبة، يمكنك إنشاء قوائم وصف تسهل على المستخدمين فهم المحتوى والتفاعل معه. لذا، استخدم قوائم الوصف عند الحاجة لتقديم معلومات مصطلحات بطريقة منظمة وجذابة.