HTML <source> Tag

Beginner
⏱️ 6 min read
📚 Updated: Jun 2026
🎯 2 Examples
HTML Media
HTML source tag tutorial — multiple media resources for audio and video
Overview

What You’ll Learn

The <source> tag provides multiple media resources inside audio, video, and picture elements. This guide covers syntax, attributes, fallback content, and best practices for beginners.

01

Media URLs

src attribute.

02

MIME type

type hint.

03

audio/video

Nested use.

04

Formats

MP3, WebM.

05

Fallback

Backup text.

06

picture

Responsive.

Fundamentals

What Is the <source> Tag?

The <source> tag specifies different media resources for browsers to choose from, ensuring compatibility and an optimal user experience. It is commonly nested within <audio> and <video> to offer alternative formats, and inside <picture> for responsive images.

✅
Valid HTML5 — Void Element

source has no closing content and no visible output on its own. It only works as a child of audio, video, or picture.

The browser tries each source in order until it finds a format it can play or display.

Foundation

📝 Syntax

Place source inside audio or video, with src and type attributes:

syntax.html
<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

Syntax Rules

  • source is a void element — use <source ...> without inner content.
  • List sources from most preferred to fallback formats.
  • Always set type so browsers skip unsupported MIME types quickly.
  • Put human-readable fallback text after all source elements inside the parent.
Cheat Sheet

⚡ Quick Reference

TopicCode SnippetNotes
Video sourcesrc="file.mp4" type="video/mp4"Inside video
Audio sourcesrc="file.mp3" type="audio/mpeg"Inside audio
Picture sourcesrcset="img.webp" type="image/webp"Inside picture
Media querymedia="(min-width: 800px)"On picture source
Parent elementsaudio, video, pictureRequired
Browser supportModern + IE 9+Wide support
Comparison

⚖️ <source> vs src on Parent

ApproachWhen to useExample
src on audio/videoSingle file only<audio src="song.mp3">
Multiple sourceCross-browser format fallbackMP3 + Ogg + WebM
Rule of thumbUse source when you need more than one format
Reference

🧰 Attributes

The <source> tag supports attributes such as src and type that help browsers select a compatible media resource.

src Required*

URL of the media file for audio and video sources.

src="/audio/count.mp3"
type Recommended

MIME type (e.g. video/mp4, audio/mpeg) so browsers skip unsupported formats.

type="audio/mpeg"
srcset picture

Image URL(s) when source is inside a picture element.

srcset="hero.webp"
media picture

Media query condition for responsive image sources.

media="(min-width: 768px)"

* Use srcset instead of src for picture sources.

Hands-On

Examples Gallery

Offer multiple formats and fallback messages with source inside media elements.

👀 Live Preview

Audio player with multiple source formats:

📚 Common Use Cases

Use <source> to list alternative media files and provide fallback text when nothing can play.

Multiple Source Options

By including multiple source elements within audio or video, you accommodate various formats for playback across different browsers:

multiple-source-options.html
<audio controls>
  <source src="/audio/count.mp3" type="audio/mpeg">
  <source src="/audio/count.ogg" type="audio/ogg">
  Your browser does not support the audio tag.
</audio>
Try It Yourself

Fallback Content

The content within video or audio after all source elements serves as fallback when none of the specified sources are supported:

fallback-content.html
<video controls>
  <source src="/video/count.mp4" type="video/mp4">
  <source src="/video/count.webm" type="video/webm">
  Fallback content if the browser does not support any of the sources.
</video>
Try It Yourself
A11y

♿ Accessibility

  • Meaningful fallback text — Tell users when media cannot play and offer an alternative link if possible.
  • Captions and transcripts — Pair video with track elements for subtitles (see the video tag).
  • Do not rely on autoplay — Let users control playback with controls.
  • Describe media — Provide context in surrounding text for screen reader users.

🧠 How <source> Works

1

Author lists sources

Multiple source elements are nested inside audio or video.

Markup
2

Browser tests formats

Each type and file is checked until one is playable.

Select
3

Media plays or fallback shows

If no source works, inner fallback text is displayed instead.

Fallback
=

Cross-browser media delivery

Users get the best format their browser supports without extra JavaScript.

Compatibility

Browser Support

The <source> tag is supported in all modern browsers. Internet Explorer 9+ supports source inside audio and video with format limitations.

✓ Baseline · HTML5

Multi-format media everywhere

All modern browsers support <source> for audio, video, and picture elements.

100% Modern browser support
Google Chrome Fully supported
Full support
Mozilla Firefox Fully supported
Full support
Apple Safari Fully supported
Full support
Microsoft Edge Fully supported
Full support
Internet Explorer IE 9+ · limited codecs
Partial support
Opera Fully supported
Full support
<source> tag 100% modern · IE 9+

Bottom line: Use multiple <source> elements for reliable cross-browser media playback.

Wrap Up

Conclusion

Mastering the <source> tag is key to delivering high-quality multimedia content on the web. By providing multiple sources and understanding browser compatibility, you ensure a seamless experience for users across various platforms.

View Examples Gallery Try audio sources
Pro Tips

💡 Best Practices

✅ Do

  • Include multiple source elements for broader compatibility
  • Always set accurate type MIME types
  • Provide fallback text inside audio or video
  • Test media files across browsers and devices

❌ Don’t

  • Use source outside audio, video, or picture
  • Skip the type attribute on large media files
  • Assume one format works in every browser
  • Leave fallback content empty
Summary

Key Takeaways

Knowledge Unlocked

Six truths every developer should know about <source>

Bookmark these before you embed media.

6
Core concepts
🎬 01

Media URLs

src attribute.

Core
📄 02

MIME type

type hint.

Attributes
🔊 03

audio/video

Parent tags.

Usage
📚 04

Multi-format

MP3 + WebM.

Pattern
🚫 05

Fallback

Backup text.

Resilience
🌐 06

IE 9+

Wide support.

Compatibility
🎯 You’re ready to deliver media across browsers
Review Quick Reference →

❓ Frequently Asked Questions

It lists alternative media files inside audio, video, or picture so browsers pick a supported format.
Nest it inside audio, video, or picture. It cannot be used alone.
The MIME type lets browsers skip formats they cannot play without downloading the full file first.
Text inside audio or video after all source elements, shown when no source works.
Yes in all modern browsers. IE 9+ supports source with some codec limitations.

Deliver media across browsers

Practice <source> with audio and video formats in the Try It editor.

Try audio sources →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

6 people found this page helpful

HTML small Tag HTML spacer Tag