The HTML src attribute specifies the source or location of an external resource to be loaded by an element. It is commonly used to link images, media files, scripts, and embedded content.
- Defines the URL or path of the resource to be loaded.
- Used with elements such as <img>, <audio>, <video>, <script>, and <iframe>.
- Supports both relative and absolute URLs.
Syntax:
<element src="url">HTML src attribute Supported tags
| Tag | Description |
|---|---|
| <audio> | Embeds sound content for playback in a webpage. |
| <embed> | Integrates external applications or content. |
| <iframe> | Embeds another HTML document within the current one. |
| <frame> | Deprecated. Divides the browser window. |
| <img> | Embed images for display. |
| <input> | Creates interactive control elements in forms. |
| <script> | Embeds or links to external scripts. |
| <source> | Specifies alternative media resources. |
| <track> | Provides text tracks for multimedia elements. |
| <video> | Embeds video content for playback in a webpage. |
Attribute Values
It contains a single value URL that specifies the link of the source file. There are two types of URL links which are listed below:
| Term | Description |
|---|---|
| Absolute URL | Points to a resource outside the current website/domain. |
| Relative URL | Points to a resource within the same website/domain. |
Example of HTML src attribute
Example 1: In this example we displays GeeksforGeeks heading and an audio player with multiple source files for playback control.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
HTML audio src Attribute
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>
HTML audio src Attribute
</h2>
<!--Driver Code Ends-->
<audio controls muted>
<source src="GFG.mp3" type="audio/mp3">
<source src="GFG.ogg" type="audio/ogg">
</audio>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
Example 2: In this example image linked via the "src" attribute with an alternative text.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
HTML img src Attribute
</title>
</head>
<!--Driver Code Ends-->
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h2>HTML img src Attribute</h2>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png"
alt="GeeksforGeeks logo">
</body>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->