شرح العنصر <figure> في HTML5
أدى إطلاق HTML5 إلى ظهور العديد من العناصر الجديدة المصممة لإنشاء مستندات وتطبيقات أكثر فائدة. ومن بينها، يبرز عنصر <figure> كأداة متعددة الاستخدامات لإضافة محتوى الوسائط مع تعليقاتها التوضيحية إلى صفحات الويب.
تاريخ العنصر
تم تقديمه رسميًا في أكتوبر 2014 كجزء من مواصفات HTML5 بواسطة اتحاد شبكة الويب العالمية (W3C)، يغلف عنصر <figure> عناصر الوسائط مثل الصور والرسوم البيانية والصور الفوتوغرافية ومقاطع التعليمات البرمجية.
بناء الجملة
يكون بناء الجملة (بما في ذلك العنصر الاختياري <figcaption>) على النحو التالي:
<figure>
<img src="path_to_image" alt="نص بديل">
<figcaption>تعليق على الصورة</figcaption>
</figure>أمثلة تطبيقية
فيما يلي بعض الأمثلة على حالات استخدام مختلفة لعنصر <figure>. يمكنك تضمين جميع أنواع الوسائط الغنية مع تعليق توضيحي، كما هو موضح.
يمكن تصميم العنصر <figure> مثل أي عنصر آخر على مستوى الكتلة.
شكل مع صورة
<figure>
<img src="images/sample.jpg" alt="صورة نموذجية">
<figcaption>هذه صورة نموذجية.</figcaption>
</figure>
شكل مع مقتطف التعليمات البرمجية
<figure>
<pre><code>
دالة helloWorld() {
console.log("مرحبا بالعالم!");
}
</code></pre>
<figcaption>دالة جافا سكريبت لطباعة "مرحباً بالعالم!"</figcaption>
</figure>
دالة helloWorld() {
console.log("مرحبا بالعالم!");
}
شكل مع الجدول
<figure>
<table>
<tr>
<th>الاسم</th>
<th>البريد الإلكتروني</th>
</tr>
<tr>
<td>جون دو</td>
<td>john@example.com</td>
</tr>
</table>
<figcaption>جدول يوضح معلومات المستخدم.</figcaption>
</figure>| الاسم | البريد الإلكتروني |
|---|---|
| جون دو | john@example.com |
شكل مع الفيديو
<figure>
<video src="videos/sample.mp4" controls></video>
<figcaption>فيديو نموذجي مع عناصر التحكم.</figcaption>
</figure>شكل مع الصوت
<figure>
<audio src="audio/sample.mp3" controls></audio>
<figcaption>عينة صوتية مع عناصر التحكم.</figcaption>
</figure>السمات
لا يحتوي العنصر <figure> على سمات محددة؛ فهو يستخدم السمات العالمية في HTML.
المحتوى
يقبل العنصر <figure> محتوى التدفق كعناصر فرعية. غالبًا ما يحتوي على عنصر <img> واحد أو أكثر، مع عنصر <figcaption> اختياري لإضافة تعليق توضيحي.
هل تعلم؟
- العنصر
<figure>هو نوع مستقل من المحتوى، مما يعني أنه يمكن نقله بعيدًا عن التدفق الرئيسي للمستند دون التأثير على معناه. - يمكن أن يظهر العنصر
<figcaption>المستخدم داخل<figure>عنصر قبل المحتوى أو بعده، ولكن من الأفضل عمومًا وضعه بعده.
