در اين بخش از
دوره آموزش 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>
مزاياي استفاده از figcaption
- اضافه کردن توضيح مرتبط با تصوير يا نمودار براي کاربران.
- بهبود دسترسي و قابليت خوانايي محتوا براي ابزارهاي کمکخواني.
- امکان استايلدهي مستقل کپشن با CSS.
براي يادگيري کامل نحوه استفاده از تصاوير و کپشنها در HTML، پيشنهاد ميکنيم در دوره آموزش HTML مقدماتي تا پيشرفته آموزش دون شرکت کنيد.
براي مشاهده تمام آموزشهاي HTML، به صفحه اصلي آموزش دون مراجعه کنيد.
آموزش قبلي: تگ fieldset در HTML
آموزش بعدي: تگ figure در HTML






دیدگاه و پرسش