HTML الوسم <figcaption>

تعريفه

نستخدم الوسم <figcaption> لعرض وصف للشيء الموضوع بداخل الوسم <figure> على النحو التالي.

<figure>
	<img src="example.png">
	<figcaption>text</figcaption>
</figure> 
	

مكان الكلمة text نمرر النص الذي سيتم عرضه كوصف لهذا الشيء.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <figcaption>.

خصائصه

لا يملك أي خصائص تم إعدادها خصيصاً له.

إستخدامه

في المثال التالي قمنا بإضافة صورة و وصف خاص بها.

<figure>
	<img src="planets.PNG">
    <figcaption>Fig 1 - The solar system.</figcaption>
</figure>
		

جرب الكود

في المثال التالي قمنا بتحسين ظهور الصورة و الوصف الخاص بها بواسطة كود CSS.

figure {
	border: thin #c0c0c0 solid;
	display: flex;
	flex-flow: column;
	padding: 5px;
	max-width: 254px;
	margin: auto;
}

img {
	max-width: 254px;
	height: auto;
}

figcaption {
	background-color: #222;
	color: #fff;
	font: italic smaller sans-serif;
	padding: 6px 3px;
	text-align: center;
}
		

جرب الكود

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

figcaption {
	display: block;
}
	

نصائح و ملاحظات

يمكنك وضع وصف الشيء الموضوع فوقه أو تحته على حسب تصميمك و يمكنك تعديل طريقة ظهورهم بواسطة CSS ليظهروا بالشكل الذي تريده.