HTML src Attribute - HTML Attribute - Horje

Definition and Usage

The src attribute specifies the location (URL) of the external resource.

Applies to

The src attribute can be used on the following elements:

Elements	Attribute
<audio>	src
<embed>	src
<iframe>	src
<img>	src
<input>	src
<script>	src
<source>	src
<track>	src
<video>	src

Browser Support

The src attribute has the following browser support for each element:

How to add An audio player - HTML src Attribute

Audio Example. The audio src attribute Click on the play button to play a sound: Your browser does not support the audio element. Note: The .ogg fileformat is not supported in IE or Safari.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The audio src attribute</h1>

<p>Click on the play button to play a sound:</p>

<audio src="https://file-examples.com/wp-content/storage/2017/11/file_example_MP3_700KB.mp3" controls>
Your browser does not support the audio element.
</audio>

<p><b>Note:</b> The .ogg fileformat is not supported in IE or Safari.</p>

</body>
</html>

Output should be:

How to add An embedded flash animation - HTML src Attribute

Embed Example.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The embed src attribute</h1>

<embed src="https://horje.com/avatar.png">

</body>
</html>

Output should be:

How to add An <iframe> in its simplest use - HTML src Attribute

Iframe Example.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The iframe src attribute</h1>

<iframe src="https://horje.com">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

Output should be:

How to add An image is marked up as follows - HTML src Attribute

Img Example.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The img element</h1>

<img src="https://horje.com/avatar.png" alt="Girl in a jacket" width="500" height="600">

</body>
</html>

Output should be:

How to add An HTML form with an image that represents the submit button - HTML src Attribute

Input Example. Click on the image, and the input will be sent to a page on the server called "/action_page.php".

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The input src attribute</h1>

<p>Click on the image, and the input will be sent to a page on the server called "/action_page.php".</p>

<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="image" src="https://horje.com/avatar.png" alt="Submit" width="48" height="48">
</form>

<p><b>Note:</b> The image input type sends the X and Y coordinates of the click that activated the image button as default.</p>

</body>
</html>

Output should be:

How to Point to an external JavaScript file - HTML src Attribute

Script Example. This text comes from an external script.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The script src attribute</h1>

<script src="demo_script_src.js">
</script>

</body>
</html>

Output should be:

How to add An audio player with two source files. The browser should choose which file (if any) it has support for - HTML src Attribute

Source Example. The source element. Click on the play button to play a sound:

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The source element</h1>

<p>Click on the play button to play a sound:</p>

<audio controls>
  <source src="https://file-examples.com/wp-content/storage/2017/11/file_example_MP3_700KB.mp3" type="audio/ogg">
  <source src="https://file-examples.com/wp-content/storage/2017/11/file_example_MP3_700KB.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

</body>
</html>

Output should be:

How to add A video with two subtitle tracks - HTML src Attribute

See the Example.

index.html

Example: HTML

 <video width="320" height="240" controls>
  <source src="https://www.sample-videos.com/video321/mp4/360/big_buck_bunny_360p_10mb.mp4" type="video/mp4">
  <source src="https://www.sample-videos.com/video321/mp4/360/big_buck_bunny_360p_10mb.mp4" type="video/ogg">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>

Output should be:

How to add Video Example - HTML src Attribute

Video Example. Note: The .ogg fileformat is not supported in old IE and Safari.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<h1>The video src attribute</h1>

<video width="320" height="240" controls src="https://www.sample-videos.com/video321/mp4/240/big_buck_bunny_240p_30mb.mp4">
  Your browser does not support the video tag.
</video>

<p><b>Note:</b> The .ogg fileformat is not supported in old IE and Safari.</p>

</body>
</html>

Output should be:

html src attribute

Type:	Develop
Category:	Web Tutorial
Sub Category:	HTML Attribute
Uploaded by:	Admin

Read Article
https://develop.horje.com/learn/1434/reference