HTML src Attribute

Introduction

The src attribute is one of the most important attributes in HTML. It specifies the source URL of a resource the browser should load and embed—such as an image, JavaScript file, iframe page, or media clip. Without a valid src, the element usually has nothing to display or run.

The value is typically a URL: absolute (https://example.com/logo.png), root-relative (/images/logo.png), or relative to the current page (assets/app.js). The same attribute name appears on several elements, but each element loads a different kind of content.

What You’ll Learn

Purpose of src

The primary purpose of the src attribute is to tell the browser where to fetch external content that should become part of the page. On an <img>, that is the image file. On a <script>, it is a JavaScript file to download and execute. On an <iframe>, it is another HTML document to display inside the frame.

Depending on the element, src can point to images, scripts, styles (via deprecated patterns), audio, video, subtitle tracks, or nested documents. The browser resolves the URL, requests the resource, and renders or runs it in place.

📝 Syntax

Set src to a valid URL string on supported elements:

<img src="photo.jpg" alt="Description">

<script src="app.js" defer></script>

<iframe src="https://example.com/embed" title="Embedded page"></iframe>

Syntax Rules

• Value is a URL string (absolute, root-relative, or relative path).
• On <img>: required unless using certain SVG patterns; always include alt.
• On <script src>: do not put inline code inside the tag—use a separate file or omit src.
• On <video> / <audio>: prefer <source src> for multiple formats.
• URLs must be encoded correctly (spaces as %20, etc.).
• Cross-origin resources may be subject to CORS and security policies.

💎 Values

The src attribute accepts a URL. Common patterns:

• Relative file — src="images/logo.png" (relative to the current page URL).
• Root-relative — src="/assets/app.js" (from the site root).
• Absolute URL — src="https://cdn.example.com/lib.js".
• Data URL — src="data:image/svg+xml,..." for inline small assets.
• Media on source — <source src="clip.mp4" type="video/mp4"> inside <video>.

<!-- Image -->
<img src="/images/hero.webp" alt="Hero">

<!-- External script -->
<script src="https://example.com/analytics.js" async></script>

<!-- Video with source -->
<video controls>
  <source src="example.mp4" type="video/mp4">
</video>

Applicable Elements

src vs href vs srcset vs srcdoc

Examples Gallery

img, script, video/source, and dynamic element.src updates in JavaScript.

👀 Live Preview

An <img> loaded via src:

The browser fetches the URL in src and displays the image.

Example 1 — Image Element

The <img> element uses src to specify the image file and alt for accessibility:

src.html

Copy

<img src="example.jpg" alt="An example image">

View Output Try It Yourself

📤 Output:

How It Works

The browser requests example.jpg, decodes it, and paints it inline. If the file fails to load, the alt text is shown instead.

Example 2 — Script Element

Load an external JavaScript file with <script src>:

script-src.html

Copy

<script src="script.js"></script>

View Output Try It Yourself

📤 Output:

The browser downloads script.js, parses it, and runs it. Add defer to run after HTML parsing or async for non-blocking load.

How It Works

When src is present, the script content comes from the external file. Leave the tag empty—do not mix inline code with src.

Example 3 — Video Element

Embed video with src on a <source> child inside <video>:

video-src.html

Copy

<video width="320" height="240" controls>
  <source src="example.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

View Output Try It Yourself

📤 Output:

The video player loads example.mp4 from the source element. Add multiple source tags for WebM, MP4, etc.

How It Works

The browser picks the first supported source. The fallback text inside <video> appears only if no source works.

Dynamic Values with JavaScript

Change the loaded resource at runtime by assigning to element.src:

dynamic-src.html

Copy

<img id="dynamicImage" src="photo-a.jpg" alt="Gallery image">

<script>
  document.getElementById("dynamicImage").src = "photo-b.jpg";
</script>

View Output Try It Yourself

📤 Output:

Assigning a new URL to img.src triggers a fresh download and updates the displayed image.

How It Works

In this script, src is set to photo-b.jpg (or new-example.jpg) on the image with id dynamicImage. The same pattern works for iframe.src and other elements that expose a src IDL attribute.

♿ Accessibility

• Images need alt text — Every <img src> should have a descriptive alt attribute (or alt="" if decorative).
• Iframes need titles — Set title on <iframe src> so screen reader users know what the embedded frame contains.
• Video and audio — Provide captions with <track src> for prerecorded media when possible.
• Do not rely on color in images alone — Important information in src images should also appear in text.
• Motion and autoplay — Respect user preferences; avoid unexpected autoplaying media loaded via src.

💡 Best Practices