REFERENCEhtml

html Documentation

📖 INDEX

# helloworld

LOADING ENGINE...

src

AI & DATA SCIENCE // src

The src attribute specifies the URL of an external resource to embed or load — used across <img>, <script>, <video>, <audio>, <iframe>, and more.

Syntax

<img src="/photo.jpg" alt="Description">
<video src="/movie.mp4" controls></video>
<script src="/app.js"></script>

Deep Dive Course

**`src`** ("source") is one of the most widely reused attributes in HTML, appearing on any element that embeds an external file directly: images, scripts, iframes, and single-source video/audio. Its value can be an absolute URL (`https://...`), a root-relative path (`/images/photo.jpg`), or a path relative to the current page. For `<video>`/`<audio>` specifically, using `src` directly works for a SINGLE format, whereas nested `<source>` children (a different, related element) let you offer multiple format fallbacks — you generally use one approach or the other, not both together on the same media element.

1Understanding src

`src` ("source") is one of the most widely reused attributes in HTML, appearing on any element that embeds an external file directly: images, scripts, iframes, and single-source video/audio. Its value can be an absolute URL (https://...), a root-relative path (/images/photo.jpg), or a path relative to the current page. For <video>/<audio> specifically, using src directly works for a SINGLE format, whereas nested <source> children (a different, related element) let you offer multiple format fallbacks — you generally use one approach or the other, not both together on the same media element.

💡

A single src attribute on <video>/<audio> is simpler for one guaranteed format (like MP4, which has near-universal support), while multiple <source> children are the better choice when you need format fallbacks for maximum compatibility.

editor.html

<img src="/logo.png" alt="Company logo">
<iframe src="https://example.com/embed" title="Embedded content"></iframe>

localhost:3000

2Practical Example

Here is a real-world application of src showing how it is used in production HTML.

editor.html

<!-- Single src (one format) versus multiple source children (fallback formats) -->
<video src="/clip.mp4" controls></video>
<!-- versus -->
<video controls>
  <source src="/clip.mp4" type="video/mp4">
  <source src="/clip.webm" type="video/webm">
</video>

localhost:3000

3Best Practices

Follow these guidelines when working with src:

1. Use absolute URLs for resources on a different domain (like a CDN), root-relative paths for resources on your own site

2. For video/audio needing multiple format fallbacks, use nested <source> elements instead of a single src

3. Double-check src paths carefully — a typo silently results in a broken image/broken embed with no error shown to the user by default

⚠️

Tip: A single src attribute on <video>/<audio> is simpler for one guaranteed format (like MP4, which has near-universal support), while multiple <source> children are the better choice when you need format fallbacks for maximum compatibility.

editor.html

<img src="/logo.png" alt="Company logo">
<iframe src="https://example.com/embed" title="Embedded content"></iframe>

localhost:3000

Examples

Example 01Basic Usage

<img src="/logo.png" alt="Company logo">
<iframe src="https://example.com/embed" title="Embedded content"></iframe>

Example 02Advanced Example

<!-- Single src (one format) versus multiple source children (fallback formats) -->
<video src="/clip.mp4" controls></video>
<!-- versus -->
<video controls>
  <source src="/clip.mp4" type="video/mp4">
  <source src="/clip.webm" type="video/webm">
</video>

Best Practices

Use absolute URLs for resources on a different domain (like a CDN), root-relative paths for resources on your own site
For video/audio needing multiple format fallbacks, use nested elements instead of a single src
Double-check src paths carefully — a typo silently results in a broken image/broken embed with no error shown to the user by default

Interview Question

On a <video> element, what's the difference between setting src directly versus using nested <source> children?▼

Hint: Think about how many format options each approach allows the browser to choose from.

A direct src attribute on <video> provides exactly one file for the browser to load — if that format isn't supported, the video simply fails with no fallback. Nested <source> elements let you list several different file formats (e.g. MP4 and WebM), and the browser picks the first one it's able to play, giving broader compatibility across browsers with different codec support. You'd typically choose src for simplicity when a single widely-supported format (like MP4) is enough, and <source> children when you need to guarantee playback across a wider range of browsers.

Exercises

EasyPractice using src in a real scenario.

View Solution

<img src="/logo.png" alt="Company logo">
<iframe src="https://example.com/embed" title="Embedded content"></iframe>

Frequently Asked Questions

On a <video> element, what's the difference between setting src directly versus using nested <source> children?▼

A direct src attribute on

Related Functions

img-tagvideo-tagaudio-tagscript-tag