HTML Tutorial

عنصر <figure>

الخطوات العملية لاستخدام علامة <figure>:

  1. استخدم العلامة <figure> لتمثيل قطعة مستقلة من المحتوى، مثل صورة أو رسم بياني أو مقطع فيديو.
  2. ضع المحتوى داخل علامتي <figure> و </figure>.
  3. يمكنك استخدام السمة "caption" لإضافة عنوان توضيحي للمحتوى.

سمات علامة <figure>:

  • caption: يضيف عنوانًا توضيحيًا إلى المحتوى.

أمثلة على استخدام علامة <figure>:

  • صورة مع عنوان توضيحي:
<figure>
  <img src="image.jpg" alt="صورة">
  <figcaption>صورة ملونة لقطة</figcaption>
</figure>
  • مقطع فيديو مع عنوان توضيحي:
<figure>
  <video src="video.mp4" controls>
  <figcaption>مقطع فيديو لقطة تركض</figcaption>
</figure>

مثال HTML لتوضيح علامة <figure>:

<!DOCTYPE html>
<html>
<body>

<figure>
  <img src="image.jpg" alt="صورة">
  <figcaption>صورة ملونة لقطة</figcaption>
</figure>

</body>
</html>

ملاحظة: من أجل تحسين إمكانية الوصول وسهولة الاستخدام، تأكد من توفير نص بديل مُفيد لجميع الصور ومقاطع الفيديو باستخدام سمة "alt".