جلسه پنجاه و یکم: آموزش کامل تگ figure در HTML

به دوره حرفه‌ای آموزشHTML در آوای وب خوش اومدی! اینجا قراره تگ figure رو مثل یه حرفه‌ای یاد بگیری! وقتی می‌خوای یه تصویر، نمودار، جدول، قطعه‌کد، ویدیو یا هر محتوای مستقل رو همراه با یک توضیح/کپشن نشون بدی، تگ <figure> بهترین انتخابه.
این عنصر محتوا رو از متن اطراف مستقل می‌کنه و با <figcaption> می‌تونی براش توضیح روشن و قابل دسترس بذاری. نتیجه؟ معنای بهتر برای مرورگر، خواناتر برای کاربر، و فهم دقیق‌تر برای موتورهای جستجو.

🏷️ تگ figure چیه و چرا باید ازش استفاده کنی؟

تگ <figure> یه عنصر معنایی تو HTML5ه که برای گروه‌بندی محتوای چندرسانه‌ای مرتبط مثل تصاویر، ویدئوها، نمودارها، نقشه‌ها، یا حتی کدهای برنامه‌نویسی طراحی شده. این تگ بهت کمک می‌کنه محتوایی رو که می‌تونه مستقل از متن اصلی صفحه باشه، به‌صورت منظم و معنادار ارائه بدی. معمولاً با تگ <figcaption> همراهه که یه توضیح یا عنوان برای محتوا اضافه می‌کنه. چرا باید عاشقش باشی؟ چون:

• معنای قوی: به موتورهای جستجو و صفحه‌خوان‌ها می‌گه این محتوا یه بخش مستقل و مهمه.
• تجربه کاربری بهتر: با توضیحات واضح، کاربرا دقیقاً می‌فهمن چی داری نشونشون می‌دی.
• سئو فوق‌العاده: ساختار معنایی و توضیحات <figcaption> باعث می‌شه گوگل عاشق محتوات بشه.
• دسترسی‌پذیری: برای کاربران با نیازهای ویژه (مثل نابینایان) بهینه‌ست، به‌خصوص با <figcaption> و ARIA.
• پشتیبانی همه‌جانبه: همه مرورگرهای مدرن (Chrome، Firefox، Safari، Edge) ازش پشتیبانی می‌کنن.

✏️ مثلاً، اگه بخوای یه عکس با کپشن، یه ویدئو با توضیح، یا یه نمودار با عنوان تو مقاله‌ات بذاری، <figure> مثل یه قهرمان وارد صحنه می‌شه!

🧱 ساختار تگ figure: ساده، معنایی، و قدرتمند!

تگ <figure> یه تگ جفتیه که محتوای چندرسانه‌ای و توضیحاتش رو تو خودش نگه می‌داره. ساختار پایه‌ای‌ش اینه:

<figure>
    <img src="landscape.jpg" alt="منظره کوهستان">
    <figcaption>نمایی از کوه‌های البرز در پاییز</figcaption>
</figure>

اجزای اصلی:

• <figure>: ظرف اصلی برای محتوای چندرسانه‌ای و توضیحات.
• محتوا: می‌تونه <img>، <video>، <canvas>، <code>، یا حتی <iframe> باشه.
• <figcaption> (اختیاری): توضیح یا عنوان برای محتوا که می‌تونه قبل یا بعد از محتوا بیاد.

📌 نکته خفن: <figcaption> تنها تگیه که می‌تونی به‌صورت قانونی تو <figure> استفاده کنی برای توضیحات. اگه لازم نیست، می‌تونی کلاً نذاریش!

🧩 ویژگی‌های کلیدی: چطور figure و figcaption رو بترکونی؟

تگ <figure> خودش اتریبیوت اختصاصی نداره، ولی با محتوای داخلش و <figcaption> می‌تونی جادو کنی:

• محتوای چندرسانه‌ای متنوع: از تصاویر ساده تا محتوای پیچیده:
• <figcaption> معنادار: توضیحاتی بنویس که هم کاربر رو جذب کنه و هم سئو رو تقویت کنه:
• اتریبیوت‌های عمومی: مثل id، class، یا aria-* برای استایل و دسترسی‌پذیری:

📌 نکته: <figcaption> می‌تونه شامل لینک، متن فرمت‌شده، یا حتی تگ‌های دیگه مثل <strong> باشه برای تأکید.

💡 کاربردهای تگ figure: از تصاویر تا کد!

تگ <figure> تو این موقعیت‌ها می‌درخشه:

• تصاویر با کپشن: مثل عکس‌های خبری یا گالری‌های هنری.
• ویدئوهای توضیحی: جاسازی ویدئو با عنوان یا توصیف.
• نمودارها و گراف‌ها: نمایش داده‌های بصری با توضیحات.
• کدهای برنامه‌نویسی: نمایش نمونه کد با شرح عملکرد.
• نقشه‌ها و گرافیک‌های تعاملی: مثل نقشه‌های گوگل یا اینفوگرافیک‌ها.
• محتوای آموزشی: مثل تصاویر علمی با توضیحات دقیق.

📝 مثال‌های عملی: تگ figure رو تو دنیای واقعی ببین!

بیا چند نمونه خلاقانه و کاربردی ببینیم که نشون می‌دن <figure> چطور می‌تونه بدرخشه:

1. تصویر طبیعت با کپشن جذاب:

<figure>
    <img src="mountains.jpg" alt="کوه‌های پوشیده از برف" loading="lazy">
    <figcaption>نمایی خیره‌کننده از کوه‌های هیمالیا در زمستان</figcaption>
</figure>

✏️ این کد یه تصویر با توضیحی جذاب و بهینه برای سئو نمایش می‌ده.

2. ویدئوی تبلیغاتی:

<figure>
    <video src="ad.mp4" controls poster="ad-poster.jpg" aria-describedby="video-desc"></video>
    <figcaption id="video-desc">ویدئوی تبلیغاتی محصول جدید ما</figcaption>
</figure>

✏️ این کد یه ویدئو با کپشن و دسترسی‌پذیری بالا جاسازی می‌کنه.

3. گالری تصاویر:

<figure>
    <img src="photo1.png" alt="عکس 1" loading="lazy">
    <img src="photo2.png" alt="عکس 2" loading="lazy">
    <figcaption>مجموعه‌ای از تصاویر طبیعت وحشی آفریقا</figcaption>
</figure>

✏️ این کد چند تصویر رو تو یه <figure> با یه کپشن مشترک گروه‌بندی می‌کنه.

🚀 سئو با تگ figure: چطور با محتوای چندرسانه‌ای گوگل رو عاشق سایتت کنی!

تگ <figure> به‌خاطر ساختار معنایی و قابلیت ترکیب با <figcaption>، یه ابزار طلایی برای بهینه‌سازی سئو (SEO) محسوب می‌شه. این تگ به موتورهای جستجو (مثل گوگل) کمک می‌کنه تا محتوای چندرسانه‌ای (مثل تصاویر، ویدئوها، نمودارها) رو بهتر درک کنن و بهشون ارزش بیشتری بدن. در ادامه، تمام ترفندهای سئو مرتبط با تگ <figure> رو با جزئیات بررسی می‌کنیم تا بتونی محتوات رو به صفحه اول گوگل برسونی.

1. استفاده از ساختار معنایی برای درک بهتر گوگل

تگ <figure> به گوگل می‌گه که محتوای داخلش (مثل تصویر یا ویدئو) یه بخش مستقل و مهم از صفحه‌ست که ارزش ایندکس شدن داره. این معنایی بودن باعث می‌شه:

• درک بهتر محتوا: گوگل تشخیص می‌ده که این محتوا بخشی از داستان صفحه‌ست، نه فقط یه المان تزئینی.
• افزایش رتبه‌بندی: محتوای معنایی معمولاً تو الگوریتم‌های گوگل (مثل RankBrain) امتیاز بیشتری می‌گیره.

✨ چطور بهینه کنی؟

• همیشه از <figure> برای محتوای چندرسانه‌ای مرتبط استفاده کن، نه <div> یا تگ‌های غیرمعنایی.
• مطمئن شو که محتوای داخل <figure> به موضوع اصلی صفحه ربط داره.

✏️ مثال:

<figure>
    <img src="mountain.jpg" alt="کوه‌های البرز">
    <figcaption>نمایی از کوه‌های البرز در پاییز</figcaption>
</figure>

2. بهینه‌سازی figcaption با کلمات کلیدی

تگ <figcaption> مثل یه کپشن طلایی عمل می‌کنه که هم برای کاربر توضیح می‌ده، هم برای گوگل محتوای چندرسانه‌ای رو توصیف می‌کنه. این تگ فرصت عالی‌ای برای استفاده از کلمات کلیدی مرتبط با موضوع صفحه‌ست.

✏️ چطور بهینه کنی؟

• کلمات کلیدی هدفمند: تو <figcaption> از کلمات کلیدی اصلی یا مرتبط (LSI Keywords) استفاده کن، اما طبیعی و کاربرپسند بنویس.
• توضیحات توصیفی: کپشن باید محتوای چندرسانه‌ای رو دقیق توصیف کنه تا گوگل بتونه اون رو با سرچ‌های مرتبط مچ کنه.
• طول مناسب: کپشن رو کوتاه و مفید نگه دار (معمولاً 10-20 کلمه)، ولی اطلاعات کلیدی رو منتقل کن.

💡 قوانین مهم استفاده

• فقط یک <figcaption> داخل هر <figure> مجاز است.
• <figcaption> باید اولین یا آخرین فرزند باشد.
• وجود <figcaption>اختیاری است، اما alt روی <img> اجباری است.
• هر چیزی می‌تواند داخل <figure> باشد: <img>، <picture>، <svg>, <video>, <pre><code>, جدول، حتی چند آیتم مرتبط.

🆚 تفاوت با تگ‌های دیگه

📝 پروژه عملی: گالری عکس با کپشن

🎯 هدف: ساخت یک گالری ساده که برای هر تصویر یک توضیح (Caption) داشته باشه.

مراحل:

1. ۳ تا تصویر مرتبط انتخاب کن (مثلاً طبیعت یا شهر).
2. هر تصویر رو داخل یک تگ <figure> بذار.
3. زیر هر تصویر، از تگ <figcaption> برای نوشتن توضیح کوتاه استفاده کن.
4. یک تیتر اصلی با <h1> برای گالریت بزن.
5. تصاویر رو با CSS کمی مرتب و کنار هم بچین.

این پروژه برای تمرین استفاده درست از <figure> و <figcaption> عالیه و در عین حال ساده‌ست. در ضمن، یادت نره اگه تازه‌کاری، کدات رو تو W3C Validator چک کنی تا مطمئن شی همه‌چیز رو درست نوشتی.

🏁 جمع‌بندی

حالا تگ <figure> رو مثل یه حرفه‌ای بلدی و می‌تونی باهاش جادو کنی! وقتشه دست به کد بشی و محتوای چندرسانه‌ای‌ات رو با <figure> و <figcaption> تو وب معنایی، زیبا، و کاربرپسند نمایش بدی. این تگ نه‌تنها تجربه کاربرات رو بهتر می‌کنه، بلکه گوگل رو هم عاشق سایتت می‌کنه! این مقاله کامل‌ترین راهنمای تگ <figure>ه: از ساختار و کاربردها تا مثال‌های عملی، نکات پیشرفته، و ترفندهای سئو و دسترسی‌پذیری. پس معطل نکن! یه <figure> بنویس و نشون بده چقدر خفنی! ما تا آخر خط باهاتیم!

💬 ایده‌هات رو فریاد بزن!

نظرت درباره تگ <figure> چیه؟ دوست داری چه چیزی به این آموزش اضافه کنیم؟ سوالی تو ذهنته؟ تو نظرات برامون بنویس! تیم حرفه‌ای پشتیبانی با جون و دل منتظرته!

شهرام نجفی

شهرام نجفی — بیش از ۱۵ سال طراحی و توسعهٔ وب به‌صورت فریلنس. قالب اختصاصی آوای وب را از صفر نوشته‌ام. مطالب این سایت را بر پایهٔ مستندات رسمی MDN و WHATWG می‌نویسم و قبل از انتشار در مرورگرهای واقعی تست می‌کنم. نمونه‌کارهایم در shahramnajafi.com است.