HTML - src Attribute

HTML src attribute is used to represent external resources such as images, videos, audio, and URLs in the page from the external or device resource.

Syntax

<element src="URL" />

Applies on

Below-listed elements allow to use the HTML src attribute.

Element	Description
<audio>	HTML <audio> tag is used to embed audio files on a website.
<embed>	HTML <embed> tag is used as a container for external applications, multimedia, and interactive content that the browser don't understand.
<iframe>	HTML <iframe> tag is used to create an inline frame.
<img>	HTML <img> tag is used to embed image in to the HTML document.
<input>	HTML <input> tag is used to specify the input field.
<script>	HTML <script> tag is used to declared Client-side script (JavaScript).
<source>	HTML <source> tag is used to define a variety of media resources in different formats, such as audio, video, and images.
<track>	HTML <track> tag is used to define the time-based text tracks for a media file.
<video>	HTML <video> tag is used to embed video media player into the website.

Examples of HTML src attribute

Below examples will illustrate the HTML src attribute, where and how we should use this attribute!

Using src Attribute in "input" tag

When we run the below code, output screen displays tutorialspoint logo. Upon clicking it, it redirects to tutorialspoint website.

<!DOCTYPE html>
<html>

<head>
      <title>HTML src Attribute</title>
</head>

<body>
      <h3>HTML src Attribute</h3>
      <p>
            Image is clickable. Click to visit tutorialspoint website!
      </p>
      <form action=
"https://tutorialspoint.com/" 
            method="post">
         <input id="myImage" 
               type="image" 
               src=
"https://www.tutorialspoint.com/images/logo.png?v2" 
               alt="Submit" 
               width="200" 
               height="60"/>
      </form>
</body>

</html>

Using src Attribute in "img" tag

When we run the below code, output screen displays tutorialspoint logo. Upon clicking it, it redirects to tutorialspoint website.

<!DOCTYPE html>
<html>

<head>
      <title>HTML src Attribute</title>
</head>

<body>
      <h3>HTML src Attribute</h3>
      <img src=
"https://www.tutorialspoint.com/images/logo.png?v2" 
         alt="logo" />
</body>

</html>

Using src attribute in "video" tag

when we run the below code, it displays the video based on the link provided in src attribute.

<!DOCTYPE html>
<html>

<head>
      <title>HTML src Attribute</title>
</head>

<body>
      <h3>HTML src Attribute</h3>
      <video src=
"https://samplelib.com/lib/preview/mp4/sample-5s.mp4" 
            width="380" 
            height="220" 
            controls>
   </video>
</body>

</html>

Using src attribute in "embed" tag

The output window displays tutorialspoint logo upon execution.

<!DOCTYPE html>
<html>

<head>
      <title>HTML src Attribute</title>
</head>

<body>
      <h3>HTML src Attribute</h3>
      <embed src=
"https://www.tutorialspoint.com/images/logo.png?v2">
</body>

</html>

Using src attribute in "audio" tag

Output window displays the audio provided in src attribute with audio controls.

<!DOCTYPE html>
<html>

<head>
      <title>HTML audio src Attribute</title>
</head>

<body>
      <h3>HTML src Attribute</h3>
      <audio src=
"https://samplelib.com/lib/preview/mp3/sample-3s.mp3" 
            width="380" 
            height="220" 
            controls>
   </audio>
</body>

</html>

Using src attribute in "iframe" tag

Output window displays tutorialspoint website in the frame upon execution.

<!DOCTYPE html>
<html>

<head>
      <title>HTML iframe src Attribute</title>
</head>

<body>
      <h3>HTML src Attribute</h3>
      <iframe src=
"https://www.tutorialspoint.com/index.htm"
            height=500
            width=600 />
</body>

</html>

Linking javascript file in html document

The javascript file index.js gets linked using src attribute.

<!DOCTYPE html>
<html>

<head>
      <title>HTML src Attribute</title>
      <script src="index.js" 
            type="text/script">
      </script>
</head>

<body>
      <h3>HTML src Attribute</h3>
      <p>TutorialsPoint</p>
</body>

</html>

index.js file

// File Name- index.js 
document.write("You're visiting tutorialspoint!")

Using src attribute in "source" tag

Output window displays video using the link provided in src attribute with video controls.

<!DOCTYPE html>
<html>

<head>
      <title>HTML src Attribute</title>
</head>

<body>
      <h3>HTML src Attribute</h3>
      <video width="250" 
            height="150" 
            controls>
      <source src=
"https://samplelib.com/lib/preview/mp4/sample-5s.mp4" 
               type="video/mp4">
   </video>
</body>

</html>

Adding captions using src attribute in "track" tag

Captions get added to the video from ex1.vtt file that is linked using src attribute

<!DOCTYPE html>
<html>

<head>
      <title>Video Player</title>
</head>

<body>
      <h3>HTML src Attribute</h3>
      <video controls>
      <source src=
"https://cdn.pixabay.com/vimeo/830461265/fogging-164360.mp4?widt=1280&hash=f05a9cb58caeefbe7afe937ce7f9a00784d5f219" 
               type="video/mp4">
      <track  src="ex1.vtt" 
               kind="captions" 
               label="English" 
               srclang="en">
   </video>
</body>

</html>

Captions file

Save the following captions file with name "ex1.vtt"

WEBVTT

00:00:00.000 --> 00:00:10.000
Tuotorialspoint

00:00:10.000 --> 00:00:20.000
Simply Easy Learning

00:00:20.000 --> 00:00:30.000
Tutorialspoint.com is a dedicated website to provide quality online education

00:00:30.000 --> 00:00:35.000
Global headquarters for Tutorials Point is located in Hyderabad,Telangana,India.

00:00:35.000 --> 00:00:41.000
Mohtashim M. is the Founder & Managing Director at Tutorials Point .

Supported Browsers

Attribute
src	4.0	9.0	3.5	4.0	10.5

html_attributes_reference.htm