آشنایی با عنصر Figure در HTML
عنصر <figure> در HTML5 برای نمایش تصاویر، دیاگرام‌ها یا هر محتوای دیگری که به صورت تصویری قابل توضیح است، استفاده می‌شود. این عنصر به مرورگر و به موتورهای جستجو اطلاعات بیشتری در مورد محتوا می‌دهد. به دلیل نیاز به سازمان‌دهی بهتر محتوا، این عنصر بخصوص برای گالری‌های تصاویر و توضیحات مرتبط با آن‌ها بسیار مفید است.
به طور کلی، عنصر <figure> به شما این امکان را می‌دهد تا تصویر یا محتوای گرافیکی را به همراه توضیحات مانند عنوان یا توضیحات مربوطه به نمایش درآورید. این کار باعث می‌شود که تجربه کاربر بهبود یابد و فهم بهتری از اطلاعات ارائه شده داشته باشد.
یکی از بهترین ویژگی‌های عنصر <figure> این است که می‌تواند به دیگر عناصر مانند <figcaption> برچسب زده شود. این برچسب برای ارائه توضیحات مختصری در مورد محتوای تصویر استفاده می‌شود. به همین دلیل، این عنصر نه تنها باعث زیباتر شدن صفحه وب شما می‌شود بلکه سازمان‌دهی محتوای آن را نیز تسهیل می‌کند.
خلاصه اینکه استفاده از عنصر <figure> یک روش استاندارد و صحیح برای افزودن تصاویر و محتواهای بصری به وب‌سایت شماست. ارائه درست و منظم این عناصر می‌تواند به SEO و بهبود دسترسی کمک کند. در نتیجه، هم وب‌سایت شما از نظر کاربران و هم از نظر موتورهای جستجو بهتر گردآوری می‌شود.
کد نمونه استفاده از Figure
<figure>
<img src="image.jpg" alt="توضیح تصویر">
<figcaption>این یک تصویر زیبا است.</figcaption>
</figure>توضیح خط به خط کد
در این کد، ما یک عنصر <figure> ایجاد کرده‌ایم که به عنوان یک قاب برای تصویر عمل می‌کند.
در خط اول: <figure> آغاز می‌شود و تمام محتویات تصویر و توضیحات درون آن قرار می‌گیرد.
در خط بعدی: <img src="image.jpg" alt="توضیح تصویر"> تصویر مورد نظر را بارگذاری می‌کند. خصوصیت src مسیر تصویر را مشخص و خصوصیت alt توضیحات متنی در صورت بارگذاری نشدن تصویر را ارائه می‌دهد.
در خط بعد: <figcaption>این یک تصویر زیبا است.</figcaption> که زیرعنوان تصویر را نمایش می‌دهد، استفاده شده که معمولاً برای توضیحات بیشتر یا اطلاعات جانبی از محتوای بصری به کار می‌رود.
و در نهایت: با اختتام </figure> می‌بینیم که کل ساختار تصویر و توضیحات به پایان رسیده است.