src
The src
attribute specifies the location of a digital source, which is typically a URL or a file path. It is required for HTML elements like <img>
so that they can appear on a website or application.
Syntax
<element src="URL_or_file_path">
Parameters:
src
: Specifies the location of the resource. This can be a URL (absolute or relative) or a file path pointing to the resource.
Return value:
The src
attribute doesn’t “return” anything as it’s not a function or method but an attribute. Instead, it points to a digital source (e.g., image, video, audio, etc.) and instructs the browser to load that resource into the HTML element.
src
can also be used in the following elements:
HTML Tag | Description |
---|---|
<audio> |
Embeds sound files on websites and applications. |
<img> |
Embeds online photos, logos, and other pictures into an HTML file. |
<input> |
Creates interactive text boxes for online forms. |
<script> |
Embeds JavaScript and other executive code or data into an HTML file. |
<track> |
Specifies the subtitles and closed captions for <audio> and <video> elements. |
<video> |
Embeds movie clips or other video sources into an HTML file. |
Example 1: Displaying an Image
The following code snippet below shows how the <img>
element uses the src
attribute to display an image called logo.png
:
<img src="logo.png" alt="Codecademy logo" />
This will display the following image:
Note: When using online images or images from the folders in an IDE workspace, always add
alt
text at the end of the<img>
element just in case the browser has trouble finding them.
Example 2: Embedding an External Video
The example below shows how a video element uses the src
attribute in an embedded <source>
element to display a video called codey.mp4
from an external source:
<video controls autoplay muted width="560" height="315"><source src="codey.mp4" type="video/mp4" />Your browser does not support the video tag.</video>
The gif here shows how the video would be displayed:
Example 3: YouTube Video Embedding using iframe
element
Here’s an example of embedding a YouTube video using the iframe
element:
<iframewidth="560"height="315"src="https://www.youtube.com/embed/0QHaxrUkSEU?list=PLFzsFUO-y0HCyF0smKSi0WMhbMR2mqz2V"frameborder="0"allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"allowfullscreen></iframe>
The following gif showcases how the output of this code would look like:
In this example, an embedded YouTube video is added to the webpage using the iframe
element. The src
attribute in the <iframe>
tag contains the YouTube video URL, which points to the embedded version of the video.
Frequently Asked Questions
1. What is the difference between URL and src
in HTML?
- URL (Uniform Resource Locator): A URL is the address of a resource on the Internet. It specifies the location of a resource (like an image, video, or webpage) using a protocol (e.g.,
http://
,https://
,ftp://
) followed by the resource’s location. src
(Source) Attribute: Thesrc
attribute in HTML specifies the source location of embedded content (such as an image, video, or audio file). It points to a resource’s URL or a local file path. Thesrc
attribute itself does not define a location on its own, but instead uses a URL to point to the location of an external or internal resource.
2. When to use src
in HTML?
You use the src
attribute when you want to embed external or internal content into an HTML page. Common scenarios include:
Images: To display an image using the
<img>
tag.<img src="image.jpg" alt="Image description" />
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn HTML on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Free course
Learn HTML
Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.Beginner Friendly7 hours