HTML में <img> टैग का उपयोग 

<img> टैग का उपयोग HTML में इमेज (चित्र) जोड़ने के लिए किया जाता है। यह एक स्वत: बंद (self-closing) टैग है, जिसका मतलब है कि इसे अलग से बंद करने की आवश्यकता नहीं होती।


सिंटैक्स (Syntax):

<img src="image-path" alt="alternative-text" width="width-value" height="height-value">


एट्रिब्यूट्स (Attributes):

  1. src (Source):

    • चित्र का स्थान (URL) या फ़ाइल का पथ।
    • उदाहरण:

      <img src="image.jpg">

  2. alt (Alternative Text):

    • यदि इमेज लोड नहीं हो पाती है तो यह टेक्स्ट दिखाया जाता है।
    • उपयोग:
      यह स्क्रीन रीडर के लिए उपयोगी है और SEO में मदद करता है।
    • उदाहरण:
      <img src="image.jpg" alt="यह एक सुंदर चित्र है">

  3. width और height:

    • चित्र की चौड़ाई और ऊँचाई सेट करने के लिए।
    • मान (value) पिक्सेल या प्रतिशत में दी जा सकती है।
    • उदाहरण:
      <img src="image.jpg" width="300" height="200">

  4. title:

    • जब माउस इमेज पर होवर करता है तो यह टेक्स्ट दिखता है।
    • उदाहरण:
      <img src="image.jpg" title="यह इमेज का शीर्षक है">

  5. loading:

    • इमेज को लोड करने के तरीके को नियंत्रित करता है।
    • मान: lazy (धीरे-धीरे लोड), eager (तुरंत लोड)।
    • उदाहरण:
      <img src="image.jpg" loading="lazy">



HTML में इमेज टैग (Image Tag) का उदाहरण

यह एक साधारण उदाहरण है जो इमेज को बॉक्स में दिखाता है:

<img src="image.jpg" alt="प्राकृतिक दृश्य" width="500" height="300">


उदाहरण 1: सरल चित्र जोड़ना

<!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8"> <title>Image Tag Example</title> </head> <body> <h1>HTML में इमेज जोड़ना</h1> <img src="nature.jpg" alt="प्रकृति का सुंदर दृश्य" width="500" height="300"> </body> </html>


उदाहरण 2: इंटरनेट से चित्र जोड़ना

<!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8"> <title>Image from URL</title> </head> <body> <h1>इंटरनेट से चित्र जोड़ना</h1> <img src="https://example.com/image.jpg" alt="इंटरनेट से प्राप्त चित्र" width="400"> </body> </html>


उदाहरण 3: `lazy` लोडिंग

<!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8"> <title>Lazy Loading Image</title> </head> <body> <h1>Lazy Loading का उपयोग</h1> <img src="large-image.jpg" alt="बड़ी इमेज" loading="lazy"> </body> </html>


टिप्स:

  • यदि चित्र का पथ गलत होगा, तो alt टेक्स्ट प्रदर्शित होगा।
  • हमेशा उचित alt टेक्स्ट प्रदान करें ताकि यह SEO और एक्सेसिबिलिटी के लिए उपयोगी हो।