HTML में इमेज प्रदर्शित करने के लिए <img> टैग का उपयोग किया जाता है। यह एक सेल्फ-क्लोजिंग टैग है (कोई क्लोजिंग टैग नहीं)। src एट्रिब्यूट अनिवार्य है, और alt एक्सेसिबिलिटी के लिए महत्वपूर्ण है।
मुख्य एट्रिब्यूट्स
| एट्रिब्यूट | मान | विवरण |
|---|---|---|
| align | top, bottom, middle, left, right | डिप्रिकेटेड - इमेज का अलाइनमेंट निर्दिष्ट करता है। CSS float या vertical-align उपयोग करें। |
| alt | टेक्स्ट | वैकल्पिक टेक्स्ट निर्दिष्ट करता है (एक्सेसिबिलिटी और SEO के लिए अनिवार्य) |
| border | पिक्सेल्स | डिप्रिकेटेड - इमेज बॉर्डर की चौड़ाई। CSS border उपयोग करें। |
| crossorigin | anonymous, use-credentials | थर्ड-पार्टी इमेजेस को क्रॉस-ओरिजिन एक्सेस के साथ कैनवास पर पुनः उपयोग करने की अनुमति देता है |
| height | पिक्सेल्स या % | इमेज की ऊंचाई निर्दिष्ट करता है |
| hspace | पिक्सेल्स | डिप्रिकेटेड - ऑब्जेक्ट के बाएं/दाएं व्हाइट स्पेस। CSS margin उपयोग करें। |
| ismap | URL | इमेज को सर्वर-साइड इमेज मैप के रूप में परिभाषित करता है |
| longdesc | टेक्स्ट | डिप्रिकेटेड - लंबे विवरण का URI/URL, alt का विस्तार |
| src | URL | इमेज का URL (अनिवार्य) |
| usemap | #मैपनेम | इमेज को क्लाइंट-साइड इमेज मैप के रूप में परिभाषित करता है, <map> और <area> के साथ उपयोग |
| vspace | पिक्सेल्स | डिप्रिकेटेड - ऑब्जेक्ट के ऊपर/नीचे व्हाइट स्पेस। CSS margin उपयोग करें। |
| width | पिक्सेल्स या % | इमेज की चौड़ाई पिक्सेल्स या % में सेट करता है |
उदाहरण
निम्न कोड से वेब डॉक्यूमेंट में इमेज जोड़ें:
<!DOCTYPE html> <html>
<head>
<title>HTML img Tag</title>
</head>
<body>
<img src="https://www.tutorialspoint.com/html5/images/html5-mini-logo.jpg" alt="HTML5 सीखें" height="250" width="270" />
</body>
</html>
सर्वोत्तम अभ्यास: हमेशा alt एट्रिब्यूट प्रदान करें, रिस्पॉन्सिव इमेजेस के लिए CSS max-width: 100%; height: auto; उपयोग करें, और width/height एट्रिब्यूट्स देकर लेआउट शिफ्ट रोकें।
