الوسائط المستقلة (figure, figcaption)

figure figcaption htmlhtml figure elementصور htmlhtml image captionfigure tag html

الشرح

<figure>: • يُجمّع محتوى مرجعياً مستقلاً يمكن نقله دون التأثير على تدفق الصفحة • ليس فقط للصور — يستخدم لـ: صور، رسوم بيانية، مقتطفات كود، جداول، تسميات توضيحية • يمكن أن يحتوي <figcaption> اختيارياً

<figcaption>: • عنوان أو وصف لمحتوى figure • يمكن أن يكون في بداية أو نهاية figure • مفيد جداً للـ SEO — جوجل يربطه بالصورة/المحتوى • يحل محل alt الطويل للصور المعقدة

فوائد figure+figcaption: ✅ SEO أفضل — جوجل يفهم الصورة وعلاقتها بالنص ✅ وصولية أفضل — قارئات الشاشة تربط التسمية بالمحتوى ✅ دلالي — يوضح أن المحتوى مرجعي',

الصياغة (Syntax)

syntax

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>

نصائح احترافية

—للصور المعقدة (رسوم بيانية، مخططات)، استخدم figcaption لوصف تفصيلي وضع alt قصيراً فقط. يمكنك أيضاً استخدام aria-describedby لربط الصورة بفقرة وصفية أطول في مكان آخر.

الدرس السابق

التذييل (footer)

الدرس التالي

الحاويات غير الدلالية (div, span)

الوسائط المستقلة (figure, figcaption)

figure figcaption htmlhtml figure elementصور htmlhtml image captionfigure tag html

الشرح

الصياغة (Syntax)

syntax

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>

نصائح احترافية

—للصور المعقدة (رسوم بيانية، مخططات)، استخدم figcaption لوصف تفصيلي وضع alt قصيراً فقط. يمكنك أيضاً استخدام aria-describedby لربط الصورة بفقرة وصفية أطول في مكان آخر.

الدرس السابق

التذييل (footer)

الدرس التالي

الحاويات غير الدلالية (div, span)