src

Published Jun 13, 2023Updated Oct 19, 2023

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">

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: 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:

HTML src attribute 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: 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:

<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 below shows how the video would be displayed:

HTML src attribute gif

Note: This example demonstrates how to display a video from a local source. To display a video from an external source, such as YouTube, use the <iframe> element to embed videos from these platforms.