Open In App

What is the role of the src Attribute in <img> Tag ?

Last Updated : 26 Feb, 2024
Like Article

The src attribute in the <img> tag specifies the source URL or file path of the image to be displayed on the webpage. The browser needs to fetch and render the image correctly. Without a valid “src” attribute, the image would be missing or broken on the web page.


<img src="image-source-url" alt="alternative-text">

Attribute Values

It contains a single-value URL that specifies the link to the source image. There are two types of URL links which are listed below:

Attribute Values


Absolute URL

It points to another webpage.

Relative URL

It points to other files on the same web page.

Src Attribute

  • Source Location: The src attribute specifies the source (URL) of the image.
  • Required Attribute: It is a mandatory attribute for the <img> tag.
  • URL or Path: The value can be a URL pointing to an external image or a relative or absolute path to an image file.
  • Embedding: It can also represent embedded images by providing the data URL.
  • Fallback: If the image fails to load, the text specified in the ‘alt’ attribute is displayed instead.

Similar Reads

Is it Possible to Set Equivalent of a src Attribute of an img tag in CSS ?
In this article, we are going to see if it is possible to set the equivalent of an src attribute of a &lt;img&gt; tag in CSS. The main objective is to find an alternative that will replace the src attribute in the &lt;img&gt; with something which will do the equivalent work but with CSS. There are two approaches that are prevalent, one is using the
3 min read
How to change the src attribute of an img element in JavaScript / jQuery ?
The task is to change the src attribute of the &lt;img&gt; element by using JQuery and JavaScript. jQuery prop() Method: This method set/return properties and values of the matched elements. If this method is used to return the property value, it returns the value of the first selected element. If this method is used to set property values, it sets
3 min read
HTML &lt;img&gt; src Attribute
The &lt;img&gt; src attribute is used to specify the URL of the source image. It points to the location of the image file that the browser should display on the webpage. Syntax:&lt;img src="URL"&gt;Attribute Values: It contains a single-value URL that specifies the link to the source image. There are two types of URL links which are listed below: A
1 min read
Why card images use data-src (not src) for image in Bootstrap 4 ?
Bootstrap 4 card images use src in image tags to providing the location to be loaded in the given image tag and data-src to provide additional information that can be used by JavaScript for improving the users' experience. For data-src and src tag we can conclude as follows: src: If you want to load and display a particular image, then use .src to
3 min read
How to extract img src and alt from html using PHP?
Extraction of image attributes like 'src', 'alt', 'height', 'width' etc from a HTML page using PHP. This task can be done using the following steps. Loading HTML content in a variable(DOM variable). Selecting each image in that document. Selecting attribute and save it's content to a variable. Output as HTML img object or as plain values as require
2 min read
How href attribute is different from src attribute in HTML ?
In HTML5, the href and src attributes play distinct roles in defining paths or URLs, each associated with specific HTML elements. The href attribute, commonly found in an anchor (&lt;a&gt;) elements, points to the destination of hyperlinks, facilitating navigation. The src attribute, used with elements like &lt;img&gt; and &lt;script&gt;, specifies
1 min read
Describe the purpose of using alt attribute in &lt;img&gt; tag in HTML
The &lt;img&gt; alt attribute is used to specify the alternate text for an image. It is useful when the image is not displayed. It is used to give alternative information for an image. It is also very much helpful in the Google ranking of your page. In this article, we will discuss the alt attribute in the &lt;img&gt; tag. Syntax: &lt;img alt="text
1 min read
What is the purpose of the alt attribute in the &lt;img&gt; Tag ?
The "alt" attribute in the &lt;img&gt; Tag is important for making websites more accessible. It stands for "alternative text" and is used to describe what an image is about. If the image can't load, this text shows up instead. It's also helpful for people who use screen readers because they can hear this description, making the web more inclusive f
1 min read
What does the usemap attribute do in HTML &lt;img&gt; Tag ?
The "usemap" attribute in &lt;img&gt; tags is used to associate an image with a client-side image map. This attribute specifies the name or URL of the &lt;map&gt; element that defines clickable regions within the image. Client-side image maps allow users to interact with specific areas of an image by clicking on predefined regions. Syntax&lt;img sr
2 min read
How to use the shape attribute in the HTML img Tag ?
The "shape" attribute in &lt;img&gt; Tags are used in conjunction with client-side image maps to define the shape of clickable areas within an image. This attribute specifies the shape of the clickable region, allowing developers to create non-rectangular clickable areas such as circles, rectangles, or polygons. Syntax&lt;img src="image.jpg" usemap
2 min read