Scaler
Academy
Data Science
Neovarsity
New
Skill Test
Free Masterclass
Search for Articles, Topics
What Tag Is Used to Display a Picture in a HTML Page?

What Tag Is Used to Display a Picture in a HTML Page?

By Santanu Baruah
3 mins read
Last updated: 29 Apr 2022
146 views
Learn via video course
FREE
View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Start Learning View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Topics Covered

Overview

Images can be displayed on an HTML page with the help of the <img> tag. Images are not directly inserted into an HTML page but are instead embedded on the HTML and linked to the webpage through a url which the browser interprets and loads the image when the HTML is parsed. The <img> tag creates a holding space for the image to be inserted. It is an empty tag with two attributes and no closing tag.

The two attributes of the <img> tag are: src: It specifies the path or url to the reference image alt: It specifies an alternate text for the image

The <img> page may also take other attributes like style or width and height for specifying the size of the image to be displayed.

Syntax

The general syntax to embed an image in HTML is as follows:

We may also use attributes like style or width and height as follows:

Adding an Image to a Website

The following examples describe the use of the <img> tag to add images to a HTML website:

Here, we add an image in between two divs. We have sourced the image from an external website, the link to which is specified within the src attribute of the <img> tag.

Output:

Image div

We may also use a local address to display an image in the image source instead of using a URL. This is used in cases where the image is stored within the user's system, for example,

Output:

Image div 2

As mentioned previously in the article, we may also use the style or height and width attributes to change the image size as in the following examples. Both the codes below provide the same output:

Output:

Image div 3

Supported Browsers

The <img> tag was first used in the web browser NCSA Mosaic which was launched in 1993. It was eventually included with the HTML 2.0 specifications released in 1995 by W3C and as such, is supported by most browsers running with HTML 2.0 specifications and higher. This includes popular browsers like Google chrome, Internet Explorer, Safari, Mozilla Firefox, etc.

Conclusion

  • The <img> tag is used to display picture in an HTML file
  • The <img> tag takes the src attribute alongwith alt, style or height and width attributes.