Skip to content

[Edit] HTML: src #6613

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Apr 24, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 50 additions & 6 deletions content/html/concepts/attributes/terms/src/src.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,17 @@ The **`src`** attribute specifies the location of a digital source, which is typ
## Syntax

```pseudo
<element src="url">
<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 |
Expand All @@ -32,7 +40,7 @@ The **`src`** attribute specifies the location of a digital source, which is typ
| [`<track>`](https://www.codecademy.com/resources/docs/html/elements/track) | Specifies the subtitles and closed captions for `<audio>` and `<video>` elements. |
| [`<video>`](https://www.codecademy.com/resources/docs/html/elements/video) | Embeds movie clips or other video sources into an HTML file. |

## Example 1: Image
## 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`:

Expand All @@ -46,9 +54,9 @@ 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: Video
## Example 2: Embedding an External Video

The example below shows how a [video](https://www.codecademy.com/resources/docs/html/videos) element uses the `src` attribute in an embedded `<source>` element to display a video called `codey.mp4`:
The example below shows how a [video](https://www.codecademy.com/resources/docs/html/videos) element uses the `src` attribute in an embedded `<source>` element to display a video called `codey.mp4` from an external source:

```html
<video controls autoplay muted width="560" height="315">
Expand All @@ -57,8 +65,44 @@ The example below shows how a [video](https://www.codecademy.com/resources/docs/
</video>
```

The gif below shows how the video would be displayed:
The gif here shows how the video would be displayed:

![HTML src attribute gif](https://raw.githubusercontent.com/Codecademy/docs/main/media/html-src-attribute-video.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>`](https://www.codecademy.com/resources/docs/html/elements/iframe) element to embed videos from these platforms.
## Example 3: YouTube Video Embedding using `iframe` element

Here’s an example of embedding a YouTube video using the [`iframe`](https://www.codecademy.com/resources/docs/html/elements/iframe) element:

```html
<iframe
width="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:

![HTML YouTube embedded video output gif](https://raw.githubusercontent.com/Codecademy/docs/main/media/youtube-embedded-video-output.gif)

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**: The `src` 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. The `src` 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.

```html
<img src="image.jpg" alt="Image description" />
```
Binary file added media/youtube-embedded-video-output.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.