آموزش تگ figure در HTML - راهنمای کار با محتوای دارای توضیحات در html

با استفاده از تگ figure می توان محتواهایی مانند عکس ها، نمودارها، اشکال، لیست کد و... را در صفحه تعریف کرد. همچنین با استفاده از تگ figcaption می توان ...

با استفاده از تگ figure می توان محتواهایی مانند عکس ها، نمودارها، اشکال، لیست کد و... را در صفحه تعریف کرد. همچنین با استفاده از تگ figcaption می توان برای تعریف عنوان برای این محتوا استفاده کرد.

مثال تگ figure در HTML

مثال 1:

مثال شماره ۲ : تعریف کپشن برای تگ figure با استفاده از تگ figcaption

مثال شماره ۳ : استایل دادن به تگ figure با استفاده از CSS

<!DOCTYPE html>
<html>
<head>
<style>

figure{
border:3px #000 solid;
padding:4px;
margin:10px auto;
max-width:500px;
overflow:auto;
text-align:center;
}
figcaption{
background-color:#123456;
color:#fff;
font-style:italic;
padding:5px;
text-align:center;
}

</style>
</head>
<body>

<figure>
<img src="files/gol.jpg">
<figcaption>گل یاس</figcaption>
</figure>

</body>
</html>