HTML इमेज लिंक्स कैसे बनाएं

एक कार्यशील नमूना नीचे कोड एडिटर में है। निश्चित रूप से इसके साथ कुछ समय खेलने के लिए लें! 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image Link</title> <style> div { width: 500px; display: flex; flex-flow: column wrap; } img { width: 100%; } caption { width: 100%; height: 50px; } </style> </head> <body> <div> <a href="https://www.goldengate.org/" target="_blank" referrerpolicy="no-referrer"> <img src="https://images.unsplash.com/photo-1449034446853-66c86144b0ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" alt="गोल्डन गेट ब्रिज" refer/> </a> <caption> सैन फ्रांसिस्को स्काईलाइन में एक आइकन, गोल्डन गेट ब्रिज रात के आकाश में चमकता है। गोल्डन गेट ब्रिज के बारे में अधिक जानकारी जानने के लिए इमेज पर क्लिक करें। </caption> </div> </body> </html>

एक अंतिम नोट: केवल कैप्शन के चारों ओर <a> रखना आकर्षक है - क्योंकि लिंक उसी को संदर्भित कर रहा है। यूजर्स यह उम्मीद करने लगे हैं कि यदि वे किसी तस्वीर पर क्लिक करते हैं, तो लिंक डेस्टिनेशन के साथ एक नया टैब खुलेगा (यह वही है जो target="_blank" सिंटैक्स कर रहा है)। इसलिए, <a> टैग को लिंक के चारों ओर रखें और टेक्स्ट को तस्वीर का वर्णन करने के लिए छोड़ दें - या <a> टैग को टेक्स्ट और <img> दोनों के चारों ओर रखें। दोनों तरीके व्यवहार्य विकल्प हैं।