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

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

تگ figure در HTML چيست؟

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

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

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

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

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

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

مثال با استايل 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>