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

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

<area> এলিমেন্টের rel অ্যাট্রিবিউট বর্তমান ডকুমেন্ট এবং লিংক করা ডকুমেন্টের মধ্যে সম্পর্ক (relationship) নির্দেশ করে। এই অ্যাট্রিবিউট HTML5-এ <area> এলিমেন্টের জন্য নতুন যোগ করা হয়েছে।

সিনট্যাক্স

<area rel="value">

সম্ভাব্য মানসমূহ

উদাহরণ

<!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" rel="alternate"/>
    <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"/>

এরপর এলিয়াগুলো ডিফাইন করা হয়েছে, যেখানে Perl Tutorial-এর জন্য rel="alternate" সেট করা হয়েছে:

<area shape="poly" ... href="/perl/index.htm" alt="Perl Tutorial" target="_blank" rel="alternate"/>

SEO ও সিকিউরিটি নোটস

• rel="nofollow" — পেইড লিংক, ইউজার-জেনারেটেড কন্টেন্ট (কমেন্ট, ফোরাম) এ ব্যবহার করুন।
• rel="noopener noreferrer" — target="_blank" সাথেই ব্যবহার করুন সিকিউরিটির জন্য।
• rel="prefetch" — পরবর্তী পেজ প্রीलোড করতে চাইলে।