HTML Program to add image in html document


May 2, 2022, Learn eTutorial
1250

HTML <img> tag is used to display an image, which improves the design and the appearance of a web page. The HTML img tag is an empty tag that contains attributes only and does not have a closing tag.

Syntax:


<h2>HTML Image Example</h2>  

<img src="friends.jpg" alt=" Hello Friends"/> 
 

 Attributes of HTML img tag

The src and alt are two important attributes of HTML <img> tag.  The attribute src is used to specify the path to the image and the alt attribute is used to specify an alternate text for the image. 

 

Let’s see all the attributes of the HTML image tag.
1) src
It is an important attribute of HTML img tag that specifies the source or path of the image. It instructs the browser where to look for the image on the server and inserts it into the page. So, make sure that the image is placed in the same location with the web page. If the browser cannot find the image, then the user will get a broken link icon and the alt text.

Syntax:


<img src="rose.jpg" alt="Flower- Rose">

 

2) alt
The alt attribute is used to define an alternate text for the image if it can't be displayed. The value of the alt attribute should be described in the image in words. 

Syntax:


<img src="rose.jpg" alt="Flower- Rose">

3) width
It is an optional attribute that is used to define the width of the image in pixels to display. 

Syntax:


<img src="birds.jpg" alt="Flying birds" width="500" height="600">

4) height
It is an optional attribute that is used to define the height of the image in pixels to display. It also supports iframe, image, and object elements. 

Syntax:


<img src="birds.jpg" alt="Flying birds" width="500" height="600">

5) style
The style attribute is used to specify the width and height of an image to display.

Syntax:

< img src="birds.jpg" alt="Flying birds" >

HTML Source Code

                                          <!DOCTYPE html>
<html lang="en">
<head>
    <title>Placing Images in HTML Documents</title>
</head>
<body>
    >
    <img src="/hourse.jpg" alt=" Running Horse" width="200">
</body>
</html>

                                      

OUTPUT

HTML