تگ area در HTML: راهنمای جامع
تگ <area> یکی از عناصر کمتر شناخته‌شده اما بسیار کاربردی در HTML است که برای تعریف مناطق قابل کلیک در تصاویر نقشه‌ای (image maps) استفاده می‌شود. این تگ معمولاً در ترکیب با تگ <map> به کار می‌رود و امکان ایجاد لینک‌های مختلف در بخش‌های مختلف یک تصویر را فراهم می‌کند.
ویژگی‌های اصلی تگ area
تگ <area> دارای چند ویژگی کلیدی است که هر توسعه‌دهنده وب باید با آنها آشنا باشد:
- shape: تعیین شکل منطقه (مستطیل، دایره، چندضلعی)
- coords: مختصات منطقه قابل کلیک
- href: آدرس مقصد هنگام کلیک
- alt: متن جایگزین برای دسترسی‌پذیری
- target: تعیین نحوه باز شدن لینک (تب جدید یا همان صفحه)
| ویژگی |
توضیح |
| shape |
تعیین نوع شکل منطقه (rect, circle, poly, default) |
| coords |
مختصات بر اساس پیکسل برای تعیین محدوده |
| alt |
متن توصیفی برای موتورهای جستجو و خوانندگان صفحه |
مثال عملی استفاده از تگ area
در این مثال ساده، یک تصویر نقشه جهان را در نظر بگیرید که هر قاره به یک صفحه جداگانه لینک می‌شود:
<img src="world-map.jpg" alt="نقشه جهان" usemap="#worldmap">
<map name="worldmap">
<area shape="rect" coords="34,44,270,350" href="europe.html" alt="اروپا">
<area shape="circle" coords="337,300,44" href="africa.html" alt="آفریقا">
<area shape="poly" coords="392,24,500,40,550,100" href="asia.html" alt="آسیا">
</map>
تگ area یک عنصر خالی است و محتوایی ندارد. تمام اطلاعات مورد نیاز باید از طریق ویژگی‌های آن ارائه شوند.
کاربردهای پیشرفته
از تگ <area> می‌توان در سناریوهای مختلفی استفاده کرد:
- نقشه‌های تعاملی جغرافیایی
- راهنمای تصویری محصولات (کلیک روی بخش‌های مختلف محصول)
- منوهای تصویری
- نمودارهای قابل کلیک
- صفحات آموزشی با مناطق حساس
برای اطلاعات بیشتر درباره پیاده‌سازی و جزئیات فنی، می‌توانید از تگ area در HTML بازدید کنید.
محدودیت‌ها و ملاحظات
استفاده از تگ area دارای برخی محدودیت‌ها است:
- عدم نمایش تغییرات ظاهری هنگام هاور کردن ماوس (مگر با CSS/JS)
- پیچیدگی در تعیین مختصات دقیق برای تصاویر بزرگ
- مشکلات احتمالی در نمایش روی دستگاه‌های لمسی
- نیاز به متن جایگزین مناسب برای دسترسی‌پذیری
با این وجود، با استفاده از تکنیک‌های مدرن CSS و JavaScript می‌توان بسیاری از این محدودیت‌ها را برطرف کرد.
