HTML – Images

HTML images are used to display images on the web page.
The <img> tag is a self-closing tag, meaning it doesn’t require a closing tag.

Example-

🚀 Try it yourself! Click the button below to run the code and see the output in action.

HTML Code

Output

<head><style>.paragraph{color:red;font-size:16px}</style></head>

<img decoding="async"
            class="lazy lazy-hidden image"
            width="100px"
            height="100px"
            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-type="image" data-lazy-src="https://designwithrehana.com/wp-content/uploads/2023/12/cropped-Logo.png"
            alt="Sample Image"
          /><noscript><img decoding="async"
            class="image"
            width="100px"
            height="100px"
            src="https://designwithrehana.com/wp-content/uploads/2023/12/cropped-Logo.png"
            alt="Sample Image"
          /></noscript> <br>
           <img decoding="async"
            class="lazy lazy-hidden image"
            width="100%"

src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-type="image" data-lazy-src="/wp-content/uploads/2025/02/image-src.png"
            alt="Sample Image"
          /><noscript><img decoding="async"
            class="image"
            width="100%"

src="/wp-content/uploads/2025/02/image-src.png"
            alt="Sample Image"
          /></noscript>

In the above example –

src : attribute is used to mention the path of the image
alt : text is alternative text, which is displayed if the image cannot be loaded or for accessibility purposes.

So always try to use meaning image name in the alt text.

you can use height and width attributes also to define the height and width of the image.

PREVIOUS NEXT

HTML – Images

Example-

HTML Code

Output

In the above example –

Leave a Comment Cancel reply