آموزش و يادگيري تگ figcaption در HTML

در اين بخش از دوره آموزش HTML در آموزش دون ، با تگ <figcaption> آشنا مي‌شويم. اين تگ براي افزودن توضيح يا کپشن به عناصر <figure> مانند تصاوير، نمودارها يا ويدئوها استفاده مي‌شود.

تگ figcaption در HTML چيست؟

تگ <figcaption> به شما اجازه مي‌دهد توضيحي مرتبط با محتواي داخل تگ <figure> اضافه کنيد. اين توضيح معمولاً در بالاي يا پايين محتوا نمايش داده مي‌شود و به خوانايي و درک بهتر محتواي تصويري کمک مي‌کند.

مثال ساده از تگ figcaption

<figure>
  <img src="image.jpg" alt="نمايش نمونه">
  <figcaption>اين يک تصوير نمونه است.</figcaption>
</figure>

در اين مثال، تصوير داخل figure قرار گرفته و figcaption توضيح کوتاهي درباره آن ارائه مي‌دهد.

ويژگي‌هاي مهم تگ figcaption

ويژگي	توضيح
class	اعمال استايل CSS به کپشن
id	شناسه يکتا براي ارجاع يا استايل‌دهي
style	اعمال استايل مستقيم به کپشن

مثال با استايل CSS

<style>
  figure {
    display: inline-block;
    margin: 10px;
    border: 1px solid #ccc;
    padding: 5px;
    text-align: center;
  }
  figcaption {
    font-size: 14px;
    color: #555;
    margin-top: 5px;
  }
</style>

<figure>
  <img src="image.jpg" alt="نمايش نمونه" width="200">
  <figcaption>اين يک تصوير نمونه است.</figcaption>
</figure>