The <img> tag is used to display an image in an HTML page. Unlike many other HTML tags, the img tag does not have a closing tag.
Syntax
The src attribute is used to specify the path of the image.
<img src="file_name_with_extension">
Example
<img src="image_1.jpg" alt="simple_image failed to load" height="" width="">
Attribute
| Attribute | Values | Description |
| alt | text | Specifies an alternate text for an image |
| height | pixel | Specifies the height of an image |
| width | pixel | Specifies the width of an image |
| src | URL | Specifies the URL of an image |
| srcset | URL | Specifies the URL of the image to use in different situations |
Things to remember
- The img tag does not have a closing tag
- Location (url) of the image to be displayed should be specified using the src attribute.
- Text specified in the alt attribute is displayed if the file is not displayed for some reason.
- Always specify the height and width of the image. You can either use the height and width attributes or CSS for this.
Displaying images from another server
To load an image from another website or web server, specify the URL of the image in the src attribute.
Example
<img src="https://www.geekinsta.com/img/pic1.jpg" alt="Image failed to load" height="100" width="100">
Using CSS
To specify the height and width of the image, you can either use the attributes (height,width) or CSS.
<img src="https://www.geekinsta.com/img/pic1.jpg" alt="Image failed to load" style="height:100px;width:150px;">
It is good to use CSS for setting the size of the image because it makes your code more clean and gives you more options.
Loading image from the parent folder
To display an image saved in the parent directory, specify the path as shown in the following example.
<img src="../img.gif" alt="A beautyful gif" height="50" width="50">
