HTML Image Tag (<img>)

The <img> tag displays images in a web browser. The typically self-closing, unlike most HTML tags. In other words, it does not require a closing tag.

Syntax


      <img src="url_of_image" alt="alternative_text">

Important Attributes of the <img> tag

  • src: Specifies the path or URL of the image.
  • alt: Provides indispensable text if the image fails to load. Also improves availability.
  • width: Sets the range of the image (in px or %).
  • height: Sets the height of the image.
  • title: Displays tooltip text when mouse hovers over the image.

Exemple

1. Basic Image


      <img src="coding.jpg" alt="Image of coding">

2. Set Width and Height


      <img src="logo.png" alt="Website logo" width="100" height="50">

3. Image with Tooltip


       src="info.png" alt="Information icon" title="More details available">

4. External Image Link


      <img src="https://images.ps-aws.com/c?url=https%3A%2F%2Fd2x51gyc4ptf2q.cloudfront.">

5. Missing Image Feedback


      <img src="nonexistent.jpg" alt="Image not found">

(If 'nonexistent.jpg' doesn't exist, the text "Image not found" will be displayed.)

Preview :

Image Tag Output

(This image here showing a placeholder image or a relevant image based on the 'src' attribute in the examples.)

Summary Table

Point Details
tag img
Full Form Image
no-ending? Yes
Crucial Attributes    src, alt, width, height, title
Use For Displaying images

Stylish Practices

  • Always use the alt use for availability and SEO.
  • Use proper image formats: .jpg for prints, .png for transparent plates.
  • Resize images before uploading to reduce web page open time.
  • Prefer using relative paths for original images (e.g., images/photo.jpg) and absolute URLs for hosted link (e.g., https://google.com/image.png).

Note

Images are n't stored in HTML. They're only linked through the src specialty. Make sure the img path is correct.

Try it Yourself