HTML Image
To display an image on a web page, the HTML image tag is used. It is an empty tag with no closing tag. An empty tag in HTML usually contains attributes only.
Attributes:
The attributes of the HTML image tag are discussed below.
src:
It is used to describe the source or path of the image to be displayed and is thus a mandatory attribute of the HTML image tag.
Example:
<!DOCTYPE html> <html> <head> <title>Example</title> </head> <body> <img src ="img_girl.jpg"> </body> </html>
Explanation:
In the above example, the “src” attribute of the image tag is used to display the “img_girl.jpg” image. Since the height and the width of the image are not specified, the image will be displayed in its full size.
alt:
It is used to specify an alternate text for the image to be displayed. The value of the alt attribute is usually a text describing the image and is displayed if the image itself is not displayed on the browser for any reason, and is also good from an SEO perspective.
Example:
<!DOCTYPE html> <html> <head> <title>Example</title> </head> <body> <h3>Image</h3> <img src ="girl.jpg" alt= "girl image"> </body> </html>
Explanation:
In the above example, the “src” attribute of the image tag is used to display the “girl.jpg” image, and the “alt” attribute of the image tag is used to specify an alternate text for the image. Now, since the image does not exist, hence the value of the alt attribute will be displayed.
width:
It is used to specify the width of the image to be displayed. It is usually not required since the developers generally use CSS to serve all these purposes.
Example:
<!DOCTYPE html> <html> <head> <title>Example</title> </head> <body> <h3>Image</h3> <img src ="img_girl.jpg" width = 200px alt= "girl image"> </body> </html>
Explanation:
In the above example, the “src” attribute of the image tag is used to display the “girl.jpg” image, and the “alt” attribute of the image tag is used to specify an alternate text for the image. Since the width of the image is specified, the image will be displayed in its specified width. The height of the image will be varied accordingly.
height:
It is used to specify the height of the image. It is also usually not required since the developers generally use CSS to serve all these purposes.
Example:
<!DOCTYPE html> <html> <head> <title>Example</title> </head> <body> <h3>Image</h3> <img src ="img_girl.jpg" width = 200px height = 150px alt= "girl image"> </body> </html>
Explanation:
In the above example, the “src” attribute of the image tag is used to display the “girl.jpg” image, and the “alt” attribute of the image tag is used to specify an alternate text for the image. Since both the width and the height of the image are specified, the image will be displayed in its specified size.
To get an image from another directory/folder:
Example:
<!DOCTYPE html> <html> <head> <title>Example</title> </head> <body> <h3>Image</h3> <img src ="D:/imgs/img_girl.jpg" width = 200px height = 150px alt= "girl image"> </body> </html>
Explanation:
In the above example, the “src” attribute of the image tag is used to display the “girl.jpg” image from the path “D:/imgs/img_girl.jpg”, where “imgs” is a folder inside the “D:” directory and the “alt” attribute of the image tag is used to specify an alternate text for the image. Since both the width and the height of the image are specified, the image will be displayed in its specified size.