HTML Images

The <img> tag is used to embed images in an HTML page. It is an empty element (no closing tag).

Common attributes of <img>:

  • src – specifies the path of the image.
  • alt – alternative text if the image cannot be displayed.
  • width and height – set the image size (in px or %).

1) Basic Image


<img src="../asset/img/sample.jpg" 
     alt="Sample image">

Sample image

2) Image with Width and Height


<img src="../asset/img/sample.jpg" 
     alt="Resized image" 
     width="200" 
     height="150">

Resized image

3) Image as a Link


<a href="https://www.codingwithsonu.com">
  <img src="../asset/img/logo.png" 
       alt="Codingwithsonu Logo" 
       width="150">
</a>

Codingwithsonu Logo

4) Responsive Image


<img src="../asset/img/sample.jpg" 
     alt="Responsive image" 
     style="max-width:100%; height:auto;">

Responsive image

Tip: Always use the alt attribute. It improves accessibility and helps search engines understand the content of the image.