تگ area در html
تگ area در html یکی از تگهای تخصصی است که برای تعریف ناحیههای قابل کلیک (نقشههای تصویری یا Image Maps) درون یک تصویر به کار میرود. این تگ بهتنهایی قابل استفاده نیست و همواره باید درون تگ <map> قرار بگیرد. هدف از استفاده از تگ <area> این است که بخشهای مختلف یک تصویر بهصورت جداگانه قابلیت لینکدهی پیدا کنند؛ یعنی بتوان روی قسمت خاصی از یک تصویر کلیک کرد و به یک صفحهی دیگر هدایت شد.
ساختار کلی استفاده از تگ <area>
برای استفاده از این تگ، ابتدا باید از تگ <img> برای نمایش تصویر استفاده کرد، سپس از تگ <map> برای تعریف نقشهی کلی و تگهای <area> برای تعریف نواحی مختلف روی تصویر بهره برد. نمونهای از ساختار کلی به شکل زیر است:
<img src=”image.jpg” usemap=”#mymap” alt=”نمونه تصویر”>
<map name=”mymap”>
<area shape=”rect” coords=”34,44,270,350″ href=”page1.html” alt=”ناحیه اول”>
<area shape=”circle” coords=”400,200,60″ href=”page2.html” alt=”ناحیه دوم”>
<area shape=”poly” coords=”500,60,550,100,520,150″ href=”page3.html” alt=”ناحیه سوم”>
</map>
کاربردهای تگ <area>:
ساخت نقشه تصویری سایت: در طراحی سایتهای گرافیکی یا پروژههایی که دارای تصاویر راهنما هستند، میتوان از تصویر صفحه سایت استفاده کرده و هر قسمت از آن را به صفحه خاصی لینک کرد.
نمایش اطلاعات مرتبط با اجزای تصویر: برای مثال در تصویر یک خودرو، میتوان قسمتهای مختلف آن (مثل در، موتور، لاستیک) را به صفحات مربوط به جزئیات هر بخش متصل کرد.
طراحی رابط کاربری تعاملی بدون استفاده از JavaScript: بدون نیاز به کدنویسی پیشرفته، میتوان با این تگ نواحی تعاملی در یک تصویر تعریف کرد.
نکات مهم تگ <area>
استفاده از ویژگی
usemapدر تگ<img>الزامی است و باید با نام تعریفشده در تگ<map>مطابقت داشته باشد.تگ
<area>یک تگ خودبسته است، یعنی نیازی به تگ پایانی ندارد.این تگ از نظر بصری در صفحه دیده نمیشود، بلکه روی تصویر اعمال میشود.
تگ
<area>برای سئو مفید نیست مگر اینکه از ویژگیaltبهدرستی استفاده شده باشد.
ارائه خدمات مشاوره کسب و کار رایگان در جهت توسعه فروش، رشد کسب و کار و تغییر موقعیت برند شما پنج شنبه های هر هفته
آموزش تگ area در html
تگ <area> یکی از تگهای HTML است که برای تعریف ناحیههای تعاملی در یک تصویر مورد استفاده قرار میگیرد. این تگ تنها در ترکیب با تگ <map> به کار میرود و بهتنهایی عملکردی ندارد. هدف اصلی از استفاده از این تگ، ایجاد بخشی درون یک تصویر است که کاربر بتواند با کلیک کردن روی آن ناحیه، به یک لینک هدایت شود یا عملی خاص انجام شود.
برای آموزش درست این تگ، ابتدا باید مفهوم “نقشه تصویری” (image map) در HTML را درک کرد. نقشه تصویری به حالتی گفته میشود که تصویر به بخشهای مختلف تقسیم شده و هر بخش نقش یک لینک جداگانه را بازی میکند. تگ <area> برای مشخص کردن این نواحی مجزا روی تصویر به کار میرود.
برای استفاده صحیح از این تگ، ابتدا باید تصویر موردنظر را با ویژگی usemap به یک تگ <map> ارجاع داد. سپس درون تگ <map>، چندین تگ <area> تعریف میشوند که هرکدام نمایانگر یک بخش از تصویر هستند.
درون تگ <area>، مهمترین ویژگیها عبارتاند از:
ویژگی
shapeبرای تعیین نوع ناحیه (مانند مستطیل، دایره یا چندضلعی).ویژگی
coordsبرای تعریف مختصات دقیق ناحیه که بسته به شکل انتخابشده، ساختار متفاوتی دارد.ویژگی
hrefبرای تعیین مقصد لینک، یعنی آدرس صفحهای که کاربر پس از کلیک به آن منتقل میشود.ویژگی
altبرای ارائه توضیح متنی جایگزین که در صورت بارگذاری نشدن تصویر یا برای دسترسیپذیری بیشتر به کار میرود.ویژگی
targetبرای مشخص کردن نحوهی باز شدن لینک (مثلاً در تب جدید یا در همان صفحه).
این تگ به کاربران این امکان را میدهد که بدون استفاده از JavaScript یا ابزارهای پیچیدهتر، ناحیههایی تعاملی و قابل کلیک روی تصاویر ایجاد کنند. به همین دلیل، تگ <area> در طراحی رابط کاربری تصویری، آموزشهای تصویری، نقشههای سایت، و راهنمای تصویری کاربرد فراوان دارد.
در آموزش این تگ باید توجه کرد که طراحی ناحیهها با دقت بالا انجام شود، چون مکان دقیق کلیک کاربر به مختصات تعریفشده در ویژگی coords وابسته است. همچنین استفاده از متون جایگزین و رعایت اصول دسترسیپذیری از مواردی است که در آموزش حرفهای این تگ باید لحاظ شود.
ارائه خدمات اندیشه دیجی
خصوصیات جدید تگ area در html
تگ <area> با وجود اینکه یکی از تگهای قدیمی HTML محسوب میشود، همچنان در نسخههای جدید HTML5 نیز پشتیبانی میشود و چند ویژگی مهم آن در HTML5 تقویت و استانداردسازی شدهاند. این تگ که برای تعریف نواحی قابل کلیک روی نقشههای تصویری بهکار میرود، در HTML5 نیز عملکرد اصلی خود را حفظ کرده اما با بهبودهایی در ساختار، پشتیبانی از قابلیتهای تعاملی و دسترسپذیری همراه شده است.
یکی از مهمترین خصوصیات جدید و تأکیدشده در HTML5 برای تگ <area>، اهمیت استفاده از ویژگی alt است. این ویژگی در نسخههای قبلی هم وجود داشت، اما در HTML5 به عنوان یک جزء ضروری برای بهبود accessibility یا دسترسپذیری معرفی شده است. یعنی اگر یک تصویر دارای نقشه باشد و چندین ناحیه قابل کلیک داشته باشد، هر تگ <area> باید توضیحی واضح و مختصر از هدف خود را از طریق ویژگی alt ارائه دهد تا کاربران دارای محدودیتهای بینایی یا کسانی که از صفحهخوانها استفاده میکنند نیز بتوانند از آن بهرهمند شوند.
از دیگر خصوصیات تقویتشده در HTML5، پشتیبانی بهتر از رویدادها (Events) در تگ <area> است. اگرچه این تگ معمولاً برای لینکدهی استفاده میشود، اما میتوان با جاوااسکریپت نیز برای آن رویدادهایی مانند onclick تعریف کرد تا قابلیتهای تعاملی پیچیدهتری ایجاد شود.
همچنین HTML5 بر استفادهی درست از ویژگیهای shape و coords تأکید دارد و مرورگرهای مدرن از دقت بیشتری در تفسیر مختصات برخوردارند. این امر به ویژه در طراحیهای واکنشگرا (responsive) اهمیت دارد، چرا که ابعاد تصویر ممکن است در دستگاههای مختلف تغییر کند و لازم است ناحیهها با دقت طراحی شوند.
نکتهی دیگر در HTML5 پشتیبانی بهتر مرورگرها از ویژگی target است که به کاربران امکان میدهد تا کنترل بهتری بر نحوهی باز شدن لینکها (در تب جدید یا همان تب) داشته باشند. این موضوع به تجربه کاربری بهتر کمک میکند.
در نهایت، تگ <area> در HTML5 نیز همچنان کاربرد دارد و با رعایت استانداردهای جدید، میتوان از آن در طراحیهای مدرن و قابلدسترس بهره گرفت. استفاده درست از ویژگیها، رعایت ساختار معنایی و بهبود تعاملپذیری از مهمترین تغییرات و توصیههای جدید در خصوص این تگ هستند.
اطلاعاتت رو بده وقت مشاوره رزرو کن
