- HTML Tutorial
- HTML - Home
- HTML - Introduction
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Headings
- HTML - Paragraphs
- HTML - Fonts
- HTML - Blocks
- HTML - Style Sheet
- HTML - Formatting
- HTML - Quotations
- HTML - Comments
- HTML - Colors
- HTML - Images
- HTML - Image Map
- HTML - Iframes
- HTML - Phrase Elements
- HTML - Meta Tags
- HTML - Classes
- HTML - IDs
- HTML - Backgrounds
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML Color Names & Values
- HTML - Color Names
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Picker
- HTML References
- HTML - Cheat Sheet
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
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 |
To Continue Learning Please Login
Login with Google