<area> type অ্যাট্রিবিউট
<area> এলিমেন্টের type অ্যাট্রিবিউট লিংক করা টার্গেট URL-এর MIME টাইপ (Multipurpose Internet Mail Extensions) নির্দেশ করে। এটি ব্রাউজারকে বুঝায় যে লিংক করা রিসোর্সটি কি ধরনের মিডিয়া (ইমেজ, ভিডিও, ডকুমেন্ট ইত্যাদি)। এটি পরামর্শদাতা (advisory) — ব্রাউজার বাধ্য নয় এটি ফলো করতে।
সিনট্যাক্স
<area type="media_type">
সাধারণ MIME টাইপ উদাহরণ
| ক্যাটেগরি | MIME টাইপ | এক্সটেনশন |
|---|---|---|
| Image | image/png, image/jpeg, image/gif, image/webp, image/svg+xml | .png, .jpg, .gif, .webp, .svg |
| Video | video/mp4, video/webm, video/ogg | .mp4, .webm, .ogv |
| Audio | audio/mpeg, audio/ogg, audio/wav | .mp3, .ogg, .wav |
| Document | application/pdf, text/html, application/json | .pdf, .html, .json |
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<h2>শিক্ষা</h2>
<p>এই টেকনোলজিগুলো সহজে শিখুন....</p>
<img src="/images/usemap.gif" alt="usemap" border="0" usemap="#tutorials"/>
<map name="tutorials">
<area shape="poly" coords="74,0,113,29,98,72,52,72,38,27"
href="/perl/index.htm" alt="Perl Tutorial" download="perl" hreflang="en"/>
<area shape="rect" coords="22,83,126,125" alt="HTML Tutorial"
href="/html/images/test.png" type="image/png" />
<area shape="circle" coords="73,168,32" alt="PHP Tutorial"
href="/php/index.htm" target="_blank" download="php" hreflang="en"/>
</map>
</body>
</html>
আউটপুট
HTML এলিয়ায় ক্লিক করলে PNG ইমেজ দেখাবে (type="image/png" সেট করা থাকায়):
ব্যাখ্যা
<area shape="rect" coords="22,83,126,125" alt="HTML Tutorial"
href="/html/images/test.png" type="image/png" />
এখানে type="image/png" নির্দেশ করে যে লিংক করা রিসোর্স একটি PNG ইমেজ।
কেন type অ্যাট্রিবিউট ব্যবহার করবেন?
- অ্যাক্সেসিবিলিটি: স্ক্রিন রিডার লিংক টাইপ ঘোষণা করতে পারে
- ব্রাউজার হিন্ট: কিছু ব্রাউজার প্রিলোড/হ্যান্ডলিং অপ্টিমাইজ করতে পারে
- SEO: সার্চ ইঞ্জিন কন্টেন্ট টাইপ বুঝতে পারে
- CSS:
area[type^="image"]সিলেক্টর দিয়ে স্টাইল করা যায়
দ্রষ্টব্য
- এটি এনফোর্স (enforce) করে না — সার্ভারের Content-Type হেডারই চূড়ান্ত।
- HTML5-এ
<a>ও<link>-এওtypeঅ্যাট্রিবিউট রয়েছে।
