قوائم الوصف في HTML

قوائم الوصف في HTML

وش سالفة قوائم الوصف؟

يا هلا والله بالشباب! اليوم بنتكلم عن شي ممكن ما تستخدمه كل يوم، بس إذا احتجته، بيوفر عليك وقت وجهد ويسوي شغلك صح. أقصد قوائم الوصف (Description Lists) في HTML.

باختصار، هي طريقة ترتب فيها مصطلحات (Terms) مع الأوصاف (Descriptions) حقتها. تخيل عندك قاموس، أو قائمة أسئلة وأجوبة، أو حتى مواصفات منتج. هنا يجي دورها.

ملاحظة: تذكر إنها مو بس للتعاريف. تقدر تستخدمها لأي قائمة مصطلحات وقيم مرتبطة، وتخلي الكود حقك سيمانتيك (ذو معنى) أكثر.

المكونات الأساسية

قائمة الوصف تتكون من 3 عناصر رئيسية:

  • <dl>: هذا هو العنصر الأب اللي يضم القائمة كلها. اختصار لـ Description List.
  • <dt>: هذا يمثل المصطلح أو العنوان. اختصار لـ Description Term.
  • <dd>: هذا يمثل الوصف أو الشرح للمصطلح اللي قبله. اختصار لـ Description Data.

مثال بسيط وسريع

شوف كيف ممكن نسوي قائمة وصف لأطباق سعودية:

<dl>
  <dt>قهوة سعودية</dt>
  <dd>مشروب قهوة تقليدي يُقدم مع التمر، ويُعتبر رمزاً للكرم والضيافة.</dd>

  <dt>كبسة</dt>
  <dd>طبق أرز ولحم أو دجاج شهير في السعودية والخليج، وغالباً ما يُقدم في المناسبات.</dd>
</dl>

مصطلح واحد وأكثر من وصف؟ أيوه يمديك!

أحياناً تحتاج تشرح مصطلح واحد بأكثر من فقرة أو وصف. قوائم الوصف تسمح لك تسوي كذا بكل بساطة:

<dl>
  <dt>HTML</dt>
  <dd>لغة ترميز النصوص التشعبية.</dd>
  <dd>العمود الفقري لأي صفحة ويب، وتُستخدم لبناء هيكل المحتوى.</dd>

  <dt>CSS</dt>
  <dd>لغة أوراق الأنماط المتتالية.</dd>
  <dd>تُستخدم لتنسيق مظهر صفحات الويب، مثل الألوان والخطوط والتخطيط.</dd>
</dl>

أكثر من مصطلح لوصف واحد؟ برضه يمديك!

ولو عندك أكثر من مصطلح يشتركون في وصف واحد، تقدر تحطهم ورا بعض قبل الـ <dd>:

<dl>
  <dt>مكة المكرمة</dt>
  <dt>المدينة المنورة</dt>
  <dd>مدن مقدسة في الإسلام تقع في المملكة العربية السعودية، وتُعتبر وجهة للحجاج والمعتمرين.</dd>
</dl>

متى تستخدم قوائم الوصف؟

استخدمها في الحالات التالية عشان تخلي كودك مرتب وواضح:

  • القاموس أو المسرد (Glossary): مصطلح وشرحه.
  • الأسئلة الشائعة (FAQ): سؤال وجوابه.
  • بيانات التعريف (Metadata): مثل اسم المؤلف، تاريخ النشر، إلخ.
  • مواصفات المنتجات: اسم الميزة وقيمتها.
  • قوائم المهام (Task Lists): المهمة وتفاصيلها.

تنسيقها بالـ CSS

المتصفحات تعطي قوائم الوصف تنسيق افتراضي (غالباً الـ <dd> يكون فيه مسافة بادئة). لكن عشان تخليها شكلها حلو ومناسب لتصميمك، لازم تستخدم CSS.

تذكر: الـ HTML يحدد البنية والمعنى، والـ CSS يضبط الشكل. لا تخلط بينهم!

مثال بسيط لتنسيق بالـ CSS:

dl {
  margin-bottom: 20px;
  border: 1px solid #eee;
  padding: 15px;
  border-radius: 5px;
  background-color: #fff;
}

dt {
  font-weight: bold;
  color: #007bff; /* لون أزرق للمصطلح */
  margin-top: 10px;
  font-size: 1.1em;
}

dd {
  margin-left: 25px;
  line-height: 1.6;
  color: #555;
  padding-bottom: 5px;
}

وبس والله!

هذا كان شرح سريع ومباشر عن قوائم الوصف في HTML. بسيطة ومفيدة، وتساعدك تبني صفحات ويب منظمة وذات معنى. جربها في مشاريعك الجاية وبتشوف كيف بتفرق معاك. بالتوفيق يا مبرمجين!