HTML Image Tag

HTML Image tag makes our webpage more attractive and beautiful. Readers also love blog posts made with photos compared to webpages created without photos.

Therefore, Image Element has been add to HTML. Image Element is use to insert the picture into the HTML document. Image is defined by the <img> tag. <img> tag is an Empty HTML Tag. Which does not have a companion tag ie. closing tag.

Images can be inserte in different formats in an HTML document. You can add photos to formats such as PNG, JPEG, GIFs, etc. In whatever format we want to use the image, we have to tell that format.

You have seen an image or image inside a website, we use <img> tag to insert the image inside a website.

Syntax of HTML image tag

<img src="url" alt="some_text" style="width:value; height:value;">

Many Attributes can be used with <img> Tag, but the names of the two most important attributes are: src = “” and alt = “”

Image path written inside the src attribute. Meaning of the image in your computer where the image is, the whole way you have to write it inside the scr.

Alt attribute is use with html image tag, so that if for some reason your image is not visible on Web Page, then instead of your image, the name of the image or whatever you want to write is the tag of this alt tag In addition, search engines like Google read this Alt attribute, not your image but with the image, so writing Alt Attribute with the image is very important.

Example

<!DOCTYPE html>
<html>
<head>
<style>
img { 
  width: 100%; 
}
</style>
</head>
<body>

<img src="file-name.jpg" alt="Example Image" width="128" height="128">

</body>
</html>

Image Attributes

The names and the use of attributes that are commonly use with HTML Image tag are as follows:

  • src:- This attribute is use to define the source of the image.
  • alt:- This attribute is use to tell about the image.
  • style:- CSS Rules are applie from Style Attribute to Image.
  • width and height:- Both of these attributes are use separately. Image Width and Height are define by these.
  • align:- This is Define Image Alignment.
  • border:- Image Border is Define from Border Attribute.
  • title:- This attribute is use to give a title to the image. how to insert image in html.