HTML src Attribute

HTML src Attribute

The HTML src attribute specifies the URL of an external resource used by an element. Depending on the element, the resource may be an image, audio or video file, script, embedded page, media source, or text track.

Elements That Use the src Attribute

The src attribute is used with several HTML elements that load or reference external resources.

src Attribute Value

The value of the src attribute is generally a URL identifying the resource the element should load or use. Where the attribute is specified, the applicable HTML element normally requires a valid non-empty URL.

<img src="/img/logo-graphic.png" alt="Example logo">

The meaning and requirements of the referenced resource depend on the element using the attribute.

Images

On an <img> element, src identifies the image resource to display.

<img src="/img/logo-graphic.png" alt="Example logo">

The alt attribute should provide an appropriate text alternative when the image conveys information. The src attribute can also work with srcset and sizes when responsive image selection is needed.

Audio and Video

On the <audio> and <video> elements, the src attribute gives the URL of the media resource.

<audio src="audio/example.mp3" controls></audio>

<video src="video/example.mp4" controls></video>

A media element can reference a resource directly with src, or multiple <source> elements can be used when alternative media resources are needed.

Media Sources

When <source> is a child of an <audio> or <video> element, its src attribute specifies the URL of a media resource.

<video controls>
  <source src="video/example.webm" type="video/webm">
  <source src="video/example.mp4" type="video/mp4">
</video>

The browser can examine the available sources and select an appropriate resource. When <source> is used for responsive images inside a <picture> element, image resources are provided with srcset rather than src.

Scripts

On a <script> element, src specifies the URL of an external classic script or JavaScript module script.

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

When src is specified for a classic or JavaScript module script, the script is fetched from the referenced URL instead of using child text as the script content.

Iframes

On an <iframe> element, src specifies the URL of the page that should be loaded into the inline frame.

<iframe src="https://www.example-web.site/"
        title="Example website"></iframe>

The title attribute should provide a concise description that helps users understand the purpose of the iframe.

Other Elements

The src attribute also has element-specific uses on <embed>, <input type="image">, and <track>.

<embed src="document.pdf" type="application/pdf">

<input type="image"
       src="/img/logo-graphic.png"
       alt="Submit">

<track src="captions.vtt"
       kind="captions"
       srclang="en"
       label="English">

For an image button, the src resource must be an appropriate image. For a <track>, the resource is text track data, commonly a WebVTT file.

Relative and Absolute URLs

The src attribute can use relative or absolute URLs where the element's requirements allow them. A relative URL is resolved in relation to the document's base URL.

<img src="/img/logo-graphic.png" alt="Example logo">

An absolute URL includes the complete address of the resource.

<iframe src="https://www.example-web.site/"
        title="Example website"></iframe>

Use the URL form that correctly identifies the resource and fits the way the website is organized.

Common Mistakes

Do not use an empty src value. When a src attribute is required or provided, the applicable element generally expects a valid non-empty URL.

Do not assume every element uses the resource identified by src in the same way. The type of resource and its behavior depend on the element.

Do not use src on a <source> element inside <picture>. Responsive image sources use the srcset attribute.

Do not use both a direct src on an <audio> or <video> element and child <source> elements as alternative source-selection methods. Choose the appropriate method for the media example.

Make sure referenced files exist at the specified location and use the correct path, filename, and letter case.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The src attribute is widely supported on its established HTML elements. Compatibility can differ for newer elements or specialized uses, so check the specific element when needed.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the src Attribute

The example uses the src attribute on an <img> element to specify the image resource displayed by the browser.

Summary

The HTML src attribute specifies the URL of a resource used by an HTML element. It is used with <audio>, <embed>, <iframe>, <img>, <input type="image">, <script>, media <source>, <track>, and <video>. The resource and its behavior depend on the element using the attribute, so the URL must reference the appropriate type of content.