وسم الشكل التوضيحي <figure>

وسم figure يلف صورة أو مخططًا أو كودًا مع تسمية figcaption — وحدة توضيحية مستقلة مرتبطة بالمحتوى.

«الشكل رقم 1» في الكتب بنسخته الويبية: محتوى توضيحي (صورة، مخطط، كتلة كود، حتى فيديو) مع تسميته figcaption في وحدة واحدة مترابطة دلاليًّا. المعنى للآلات: هذا الشكل يوضح المحتوى المجاور، ويمكن نقله لملحق دون كسر النص.

التسمية تُكتب أولًا أو أخيرًا داخله، ومرة واحدة فقط. (وهو النمط المستخدم لصور الدروس في هذا الموقع.)

الصياغة

<figure>
  <img src="chart.png" alt="وصف المخطط">
  <figcaption>الشكل 1: نمو الزيارات الشهرية</figcaption>
</figure>

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<figure style="margin:0; text-align:center">
  <img src="https://placehold.co/400x180/ede9fe/6d28d9?text=مخطط+توضيحي" alt="مخطط تجريبي" style="max-width:100%; border-radius:10px">
  <figcaption style="font-size:14px; color:#666; margin-top:8px">
    الشكل 1: التسمية تظهر مرتبطة بالشكل بصريًّا ودلاليًّا.
  </figcaption>
</figure>

النتيجة المباشرة:

أهم الخصائص

الخاصية	الوظيفة
figcaption (وسم ابن)	تسمية الشكل — أول الأبناء أو آخرهم، مرة واحدة

💡 نصائح عملية

يصلح لأكثر من الصور: كتل الكود المسماة والمخططات والاقتباسات الطويلة
التسمية الوصفية الغنية تخدم SEO الصور مع alt لا بدلًا عنه

⚠️ أخطاء شائعة

استخدامه لكل صورة حتى الزخرفية — هو للأشكال التي «يشار إليها»
أكثر من figcaption أو وضعها في المنتصف

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs