عنوان شکل (figcaption)
تگ «عنوان شکل (figcaption)» توضیح کوتاه برای یک شکل می نویسد. شکل را معمولاً با تگ figure می سازیم. سپس با figcaption عنوان می دهیم. این کار فهم تصویر را ساده می کند و دسترسی را بهتر می کند.
figcaption چیست و کجا می آید؟
figcaption همان «عنوان شکل» است. این تگ باید داخل figure باشد. همچنین می تواند اولین یا آخرین فرزند figure باشد. بنابراین نظم محتوا حفظ می شود.
نمونه پایه: تصویر با عنوان
<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
استایل دهی figure و figcaption
<style>
figure {
border: 1px #cccccc solid;
padding: 4px;
margin: auto;
}
figcaption {
background-color: black;
color: white;
font-style: italic;
padding: 2px;
text-align: center;
}
</style>
<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy</figcaption>
</figure>
تنظیمات پیش فرض CSS
مرورگرها به صورت پیش فرض figcaption را بلوکی نمایش می دهند. بنابراین عنوان، یک خط کامل می گیرد.
figcaption {
display: block;
}
مراحل سریع استفاده
- یک <figure> بساز و رسانه را داخلش بگذار.
- یک <figcaption> اضافه کن و متن عنوان را بنویس.
- در صورت نیاز استایل عنوان را تنظیم کن.
- جای figcaption را اول یا آخر figure انتخاب کن.
جمع بندی سریع
- figcaption عنوان شکل را تعریف می کند.
- باید داخل figure استفاده شود.
- می تواند اول یا آخر figure بیاید.
- بهبود دسترسی و فهم محتوا را می آورد.