HTML <area> href অ্যাট্রিবিউট

<area> href অ্যাট্রিবিউট

<area> এলিমেন্টের href অ্যাট্রিবিউট ইমেজ ম্যাপের ক্লিকযোগ্য এলিয়ার (area) জন্য হাইপারলিংক টার্গেট (URL) নির্দেশ করে। এটি <a> ট্যাগের href-এর মতই কাজ করে, কিন্তু ইমেজ ম্যাপের আকারযুক্ত এলিয়ার (rect, circle, poly) জন্য।

সিনট্যাক্স

<area href="URL">

URL টাইপ

• Absolute URL: https://example.com/page.html
• Relative URL: /html/index.htm, ../page.html
• Protocol-relative: //example.com/page.html
• Anchor: #section-id
• JavaScript: javascript:alert('hi') (প্রয়োজন নয়, এভয়েড করুন)
• mailto:, tel: ইত্যাদি

উদাহরণ

<!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" target="_blank" />
    <area shape="rect" coords="22,83,126,125" alt="HTML Tutorial"
          href="/html/index.htm" target="_blank" />
    <area shape="circle" coords="73,168,32" alt="PHP Tutorial"
          href="/php/index.htm" target="_blank" />
  </map>
</body>
</html>

আউটপুট

ব্যাখ্যা

ইমেজ ম্যাপ:

<img src="/images/usemap.gif" alt="usemap" border="0" usemap="#tutorials"/>

এরিয়া ডিফাইন (shape + coords + href):

<map name="tutorials">
  <area shape="poly" coords="74,0,113,29,98,72,52,72,38,27" href="/perl/index.htm" alt="Perl Tutorial" target="_blank"/>
  <area shape="rect" coords="22,83,126,125" alt="HTML Tutorial" href="/html/index.htm" target="_blank" />
  <area shape="circle" coords="73,168,32" alt="PHP Tutorial" href="/php/index.htm" target="_blank" />
</map>

Shape ও Coords রেফারেন্স

অ্যাক্সেসিবিলিটি টিপস

• প্রতিটি <area>-এ alt অ্যাট্রিবিউট বাধ্যতামূলক (স্ক্রিন রিডারের জন্য)।
• target="_blank" সাথেই rel="noopener noreferrer" যোগ করুন।