The HTML src (source) attribute is used to specify the URL or file location of an external resource that the browser will embed or reference within a webpage.
Definition and Usage
➔ src actually embeds the content directly into the current document.
➔ The src attribute is typically used with tags that embed external content, such as:
- <img>: Specifies the source path of the image.
- <script>: Specifies the path to an external JavaScript file.
- <iframe>: Defines the URL of an external resource that will be embedded.
- <video> and <audio>: Specifies the location of the media file.
- <source>: Used within <video>, <audio>, or <picture> to provide path and format options
- <track>: Specifies the text track file (e.g. .vtt).
- <embed>: Defines a container for external applications or multimedia.
- <Input>: Image type submission button (<input type="image">).
Syntax
//In HTML
//Video example
<video width="320" height="240" controls id="sample">
<source src="myvideo.mp4" type="video/mp4">
<source src="myvideo.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
//Audio example
<audio controls id="sample">
<source src="myaudio.ogg" type="audio/ogg">
<source src="myaudio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
//Track example
<video width="320" height="240" controls>
<source src="myvideo.mp4" type="video/mp4">
<source src="myvideo.ogg" type="video/ogg">
<track src="myvideo_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="myvideo_fr.vtt" kind="subtitles" srclang="fr" label="French">
</video>
//source example
<video width="320" height="240" controls id="sample">
<source src="myvideo.mp4" type="video/mp4">
<source src="myvideo.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
//Image example
<img src="myhome.jpg" alt="Home picture" width="500" height="600">
//input example
<input type="image" src="submit_button.png" alt="Submit Form Button" width="80" height="50">
//iframe example
<iframe src="https://www.w3context.com" title="Free Online Tutorials for Web Technology">
</iframe>
//embed example
<embed src="myhome.jpg" type="image/jpg" width="300" height="200">
//script example
<script src="my-script.js"></script>
//In Javascript
const element = document.getElementById('sample');
element.src = 'myimage.jpg';
//Or
element.eetAttribute('src', 'myimage.jpg');
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML src attribute example</title>
</head>
<body>
<h3>HTML src attribute example</h3>
<p>The src attribute is used to specify the URL or file location of an external resource.</p>
<!-- "https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4" -->
<div>
<video width="320" height="240" controls id="sample">
<source src="myvideo.mp4" type="video/mp4">
<source src="myvideo.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
</body>
</html>
Click on the "Try it Now" button to see how it works.