HTML img tag

Images can be added in an HTML page with the tag. Unlike many other tags in HTML, the img tag does not have a closing tag.

HTML img tag

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

AttributeValuesDescription
alttextSpecifies an alternate text for an image
height pixelSpecifies the height of an image
widthpixelSpecifies the width of an image
srcURLSpecifies the URL of an image
srcsetURLSpecifies 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">


Share Tweet Send
Loading...