<figure>: • يُجمّع محتوى مرجعياً مستقلاً يمكن نقله دون التأثير على تدفق الصفحة • ليس فقط للصور — يستخدم لـ: صور، رسوم بيانية، مقتطفات كود، جداول، تسميات توضيحية • يمكن أن يحتوي <figcaption> اختيارياً
<figcaption>: • عنوان أو وصف لمحتوى figure • يمكن أن يكون في بداية أو نهاية figure • مفيد جداً للـ SEO — جوجل يربطه بالصورة/المحتوى • يحل محل alt الطويل للصور المعقدة
فوائد figure+figcaption: ✅ SEO أفضل — جوجل يفهم الصورة وعلاقتها بالنص ✅ وصولية أفضل — قارئات الشاشة تربط التسمية بالمحتوى ✅ دلالي — يوضح أن المحتوى مرجعي',
| 1 | <!-- صورة مع تسمية توضيحية --> |
| 2 | <figure> |
| 3 | <img |
| 4 | src="/images/html-dom-tree.png" |
| 5 | alt="مخطط يوضح شجرة DOM في HTML مع العناصر الرئيسية" |
| 6 | width="600" |
| 7 | height="400" |
| 8 | loading="lazy" |
| 9 | > |
| 10 | <figcaption> |
| 11 | الشكل 1: شجرة DOM (Document Object Model) وكيفية تنظيم عناصر HTML |
| 12 | </figcaption> |
| 13 | </figure> |
| 14 | |
| 15 | <!-- مقتطف كود مع تسمية --> |
| 16 | <figure> |
| 17 | <figcaption>مثال: نموذج تسجيل دخول HTML</figcaption> |
| 18 | <pre><code> |
| 19 | <form action="/login" method="POST"> |
| 20 | <input type="email" name="email"> |
| 21 | <input type="password" name="password"> |
| 22 | <button type="submit">دخول</button> |
| 23 | </form> |
| 24 | </code></pre> |
| 25 | </figure> |
| 26 | |
| 27 | <!-- رسم بياني --> |
| 28 | <figure role="img" aria-labelledby="chart-caption"> |
| 29 | <div class="chart"><!-- رسم بياني --></div> |
| 30 | <figcaption id="chart-caption"> |
| 31 | الشكل 2: إحصائيات زيارات الموقع خلال 2024 |
| 32 | </figcaption> |
| 33 | </figure> |
مثال 1: معرض صور مُهيكل
| 1 | <section class="tutorial-images"> |
| 2 | <h2>خطوات إنشاء أول موقع</h2> |
| 3 | |
| 4 | <figure> |
| 5 | <img |
| 6 | src="/tutorial/step1-create-file.png" |
| 7 | alt="لقطة شاشة تظهر VS Code مع ملف index.html فارغ" |
| 8 | width="800" |
| 9 | height="500" |
| 10 | loading="lazy" |
| 11 | > |
| 12 | <figcaption> |
| 13 | <strong>الخطوة 1:</strong> |
| 14 | أنشئ ملف index.html جديداً في VS Code |
| 15 | </figcaption> |
| 16 | </figure> |
| 17 | |
| 18 | <figure> |
| 19 | <img |
| 20 | src="/tutorial/step2-html-structure.png" |
| 21 | alt="كود HTML يظهر هيكل DOCTYPE html head body" |
| 22 | width="800" |
| 23 | height="500" |
| 24 | loading="lazy" |
| 25 | > |
| 26 | <figcaption> |
| 27 | <strong>الخطوة 2:</strong> |
| 28 | أضف هيكل HTML الأساسي |
| 29 | </figcaption> |
| 30 | </figure> |
| 31 | </section> |