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






دیدگاه و پرسش