htmlfreecodes.
Menu

Analytics choices

Analytics is optional. If allowed, Google measures public pages, navigation, recognized acquisition sources and engagement, including tool and playground use. The site excludes entered code, search terms and form contents from its Analytics events. You can withdraw here. This choice does not change advertising consent.

Read about Analytics and your information.

<source>

Specifies multiple media resources for media elements

✨ HTML5

Definition and Usage

The <source> element specifies multiple media resources for media elements (<video>, <audio>, and <picture>).

The <source> tag allows you to specify alternative media files which the browser may choose from, based on browser support or viewport width.

The browser will choose the first source it supports.

Tip: The <source> tag is a void element (self-closing) and does not have a closing tag.
Note: Always provide multiple formats to ensure compatibility across different browsers and devices.

Browser support and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

Attributes

Attribute Value Description
src URL Required when used with <audio> and <video>. Specifies the URL of the media file
type media_type Specifies the MIME type of the media resource (e.g., video/mp4, audio/mpeg, image/webp)
media media_query Used with <picture>. Accepts any valid media query
srcset URL Used with <picture>. Specifies the URL of the image to use in different situations
sizes sizes Used with <picture>. Specifies image sizes for different page layouts
width pixels Used with <picture>. Specifies the intrinsic width of the image
height pixels Used with <picture>. Specifies the intrinsic height of the image

Examples

Video with Multiple Sources

Provide multiple video formats for maximum browser compatibility:

Example

Unavailable or blocked: media “movie.mp4”; media “movie.webm”; media “movie.ogg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<video controls width="640" height="360">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.webm" type="video/webm" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

Audio with Fallback

Provide multiple audio formats with fallback text:

Example

Unavailable or blocked: media “audio.mp3”; media “audio.ogg”; media “audio.wav”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<audio controls>
  <source src="audio.mp3" type="audio/mpeg" />
  <source src="audio.ogg" type="audio/ogg" />
  <source src="audio.wav" type="audio/wav" />
  Your browser does not support the audio element.
</audio>

Picture with WebP and AVIF Support

Use modern image formats with fallbacks:

Example

Unavailable or blocked: image “image.avif”; image “image.webp”; image “image.jpg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <source srcset="image.jpg" type="image/jpeg" />
  <img src="image.jpg" alt="Description" />
</picture>

Responsive Images with Media Queries

Serve different images based on screen size:

Example

Unavailable or blocked: image “large.jpg”; image “medium.jpg”; image “small.jpg”; image “default.jpg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<picture>
  <source media="(min-width: 1200px)" srcset="large.jpg" />
  <source media="(min-width: 768px)" srcset="medium.jpg" />
  <source media="(min-width: 480px)" srcset="small.jpg" />
  <img src="default.jpg" alt="Responsive image" />
</picture>

High-DPI Display Support

Provide different resolutions for retina displays:

Example

Unavailable or blocked: image “image-2x.jpg”; image “image-1x.jpg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<picture>
  <source srcset="image-2x.jpg 2x, image-1x.jpg 1x" />
  <img src="image-1x.jpg" alt="High-DPI image" />
</picture>

Advanced Video with Codecs

Specify exact video codecs for better browser selection:

Example

Unavailable or blocked: media “video.mp4”; media “video.webm”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<video controls>
  <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="video.webm" type='video/webm; codecs="vp8, vorbis"' />
  Your browser does not support HTML5 video.
</video>

Common Media MIME Types

Here are the most commonly used MIME types for the type attribute:

Video Types

  • video/mp4 - MP4 video (H.264)
  • video/webm - WebM video (VP8/VP9)
  • video/ogg - Ogg video (Theora)
  • video/quicktime - QuickTime video (.mov)

Audio Types

  • audio/mpeg - MP3 audio
  • audio/ogg - Ogg audio (Vorbis)
  • audio/wav - WAV audio
  • audio/webm - WebM audio
  • audio/aac - AAC audio

Image Types

  • image/avif - AVIF image (modern, best compression)
  • image/webp - WebP image (modern, good compression)
  • image/jpeg - JPEG image
  • image/png - PNG image
  • image/svg+xml - SVG image

Source Order Importance

Important: The order of <source> elements matters! Browsers will use the first source they support.
  • Best Practice: List sources from most preferred to least preferred
  • Modern First: Put newer formats (AVIF, WebP, WebM) before older formats
  • Fallback Last: Always include a widely-supported fallback format
  • Type Attribute: Always include the type attribute to help browsers skip unsupported formats

Try it Yourself

Interactive Example

Here's a live example with multiple source formats:

Video Example:

This video element uses multiple source formats. The browser will choose the first one it supports.

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

Best Practices

  • Multiple Formats: Always provide at least 2-3 format options for compatibility
  • Type Attribute: Include the type attribute to prevent unnecessary downloads
  • Order Matters: Place modern, efficient formats first (AVIF, WebP, WebM)
  • Fallback Content: Include fallback text or elements for unsupported browsers
  • Optimize Files: Compress media files to reduce bandwidth
  • Accessibility: Always include descriptive alt text for images
  • Performance: Use media queries to load appropriate image sizes

Related Tags