HTML <area> alt एट्रिब्यूट

<area> एलिमेंट का alt एट्रिब्यूट

<area> एलिमेंट का alt एट्रिब्यूट एक क्षेत्र के लिए वैकल्पिक टेक्स्ट (alternate text) निर्दिष्ट करता है। यह वैकल्पिक टेक्स्ट तब दिखाई देता है जब इमेज किसी कारण (इंटरनेट समस्या, लोडिंग त्रुटि, आदि) से प्रदर्शित नहीं हो सकती। यह एक्सेसिबिलिटी के लिए भी महत्वपूर्ण है (स्क्रीन रीडर इसे पढ़ते हैं)।

वाक्यविन्यास (Syntax)

<area alt="text">

यहां text सेट किया जाने वाला वैकल्पिक टेक्स्ट है।

उदाहरण

<!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"/>

अब, हमने आकार के अनुसार मैप और उसके अंदर क्षेत्र सेट किए हैं:

<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>

क्षेत्र सेट करते समय, alt एट्रिब्यूट का उपयोग करके alt भी सेट किया गया है:

<area shape="poly" coords="74,0,113,29,98,72,52,72,38,27"
      href="/perl/index.htm" alt="Perl Tutorial" target="_blank" />

महत्वपूर्ण बिंदु

• यदि href मौजूद है, तो alt आवश्यक है (HTML5 मानक)।
• alt टेक्स्ट संक्षिप्त लेकिन वर्णनात्मक होना चाहिए।
• यह SEO और एक्सेसिबिलिटी (WCAG) दोनों के लिए महत्वपूर्ण है।