Tag for Images
<img> tag is used to display the images on the web page. The image tag has a mandatory attribute “src” which stands for source. The image tag supports jpg, jpeg, png, and gif type of files.
Attributes: many HTML tags have additional options that can be used to customize the content displayed on the web browser, these options are called Attributes. Each attribute has attribute-name and its value placed within the quotation marks.
For example: <img src=”logo.png” /> where src is the attribute-name and logo.png is the attribute-value. The “/” before closing angular brackets signifies that the tag is closed since <img> tag does not have its corresponding closing tag. The HTML code below demonstrates the use of <img> tag. In the code below there is some text in <p> tag followed by <img> tag to display image and again followed by some content in <p> tag.
[html]
<html>
<head>
<title>Image Tag</title>
</head>
<body>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<img src=”logo.jpg” />
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</body>
</html>
[/html]
The output of the above HTML code is shown below, where the image be displayed along with the text content.
The video below demonstrates the complete working of HTML Image tags
There are other optional attributes for the <img> tag such as width and height through which width and height of the image to be displayed can be assigned. By default, if width and height are not defined, the image will be displayed with its original dimensions. The <img> tag also has an optional attribute alt, which stands for alternate text to be displayed in case image cannot be displayed.
For example: <img src=”logo.png” width=”300″ height=”100″ alt=”company logo” /> the image displayed through this tag on the web browser will have width and height 300 x 100 pixels. The values of width and height attributes can also be provided with percentage, for example, width=”60%” and height=”30%” which corresponds to the per cent of width and height of the original image. The HTML code given below demonstrates the use of width and height attributes of the <img> tag.
[html]
<html>
<head>
<title>Image Tag with width and Height</title>
</head>
<body>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<img src=”logo.jpg” />
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
<br />
<img src=”logo.jpg” width=”300″ height=”200″/>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</body>
</html>
[/html]
In the above HTML code, the <img> tag used in line 7 displays the image “logo.jpg” in its original size and the <img> tag in line 10 displayed the same image with different width and height. The usage can be observed in the output shown below:
