HTML Media
Web pages aren't just text — images, audio, and video make content richer. <img>, <audio>, and <video> are the three core HTML5 tags for embedding multimedia resources.
The Image Tag
<img> is an empty tag — use src to specify the image path and alt to provide alternative text.
Supported Image Formats
| Format | Features | Use Cases |
|---|---|---|
| JPG/JPEG | Lossy compression, small files, no transparency | Photos, complex images |
| PNG | Lossless compression, supports transparent backgrounds | Icons, screenshots, images needing transparency |
| GIF | Supports animation, max 256 colors | Simple animations, icons |
| WebP | Next-gen format, better compression, supports transparency | Modern browser首选 |
| SVG | Vector format, scales infinitely without blur | Icons, logos, charts |
💡 Recommendation: Prefer WebP (small size, good quality). Fall back to JPG/PNG for older browsers. SVG is ideal for icons and logos — never gets blurry when scaled.
Example
HTML
<img src="/assets/images/tutorials/html-landscape-photo.webp" alt="A landscape photo" width="400" height="300">
<img src="/assets/images/tutorials/html-company-logo.webp" alt="Company Logo" title="Click to return home">
📌 The alt Attribute: Displayed when the image fails to load; read aloud by screen readers to assist visually impaired users; helps search engines understand image content. Never omit it.
The Audio Tag
The <audio> tag embeds music, podcasts, and sound effects. Adding the controls attribute displays playback controls.
Supported Audio Formats
| Format | Features | Browser Support |
|---|---|---|
| MP3 | Lossy compression, small files, best compatibility | All browsers |
| OGG | Open source, good compression | Chrome, Firefox, Edge |
| WAV | No compression, best quality, large files | All browsers |
| AAC | Better compression than MP3 | Modern browsers |
💡 Compatibility Strategy: MP3 has the best compatibility, but to ensure all browsers can play, use
<source> to provide both MP3 and OGG formats.
The <source> Tag: Multi-Format Fallback
Different browsers support different media formats. Using <source> tags lets you provide multiple format sources — the browser automatically plays the first format it supports:
HTML
<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
Your browser does not support audio playback.
</audio>
Syntax Notes:
<source>is a void tag, placed inside<audio>or<video>srcspecifies the media file pathtypespecifies the file's MIME type, helping browsers quickly determine support- Browsers check each
<source>in order and play the first supported format - If no formats are supported, the fallback text inside the tag is displayed
Common MIME Types:
| Format | MIME Type |
|---|---|
| MP3 | audio/mpeg |
| OGG Audio | audio/ogg |
| MP4 | video/mp4 |
| WebM | video/webm |
Example
HTML
<!-- Single format -->
<audio src="/assets/images/tutorials/music.mp3" controls>
Your browser does not support audio playback.
</audio>
<!-- Multi-format compatibility -->
<audio controls>
<source src="/assets/images/tutorials/music.mp3" type="audio/mpeg">
<source src="/assets/images/tutorials/music.ogg" type="audio/ogg">
Your browser does not support audio playback.
</audio>
The Video Tag
The <video> tag embeds video, also supporting controls and width/height dimensions.
Supported Video Formats
| Format | Features | Browser Support |
|---|---|---|
| MP4 | Most universal format, good compression | All browsers |
| WebM | Google's open source format, smaller size | Chrome, Firefox, Edge |
| OGG | Open source format | Chrome, Firefox |
💡 Compatibility Strategy: MP4 has the best compatibility. Use
<source> to provide both MP4 and WebM formats.
Example
HTML
<video src="video.mp4" controls width="400">
Your browser does not support video playback.
</video>
<!-- Multi-format + poster image -->
<video controls width="400" poster="cover.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support video playback.
</video>
💡 Media Format Tips: MP3 and MP4 offer the best compatibility — nearly all browsers support them. WebM is Google's open format with smaller file sizes. Using
<source> with multiple formats lets the browser automatically pick the one it supports.
❓ FAQ
Q Is the
alt attribute required? Can I skip it?A Always include
alt. It serves three purposes: 1) displays fallback text when images fail to load; 2) helps screen readers describe images to visually impaired users; 3) gives search engines context about your images, boosting SEO. For decorative images, use an empty alt="" to tell screen readers to skip them.Q What image format should I use? What's the difference between JPG, PNG, and WebP?
A Choose based on need: 1) JPG suits photos — lossy compression, small files, no transparency; 2) PNG suits icons and screenshots — lossless compression, supports transparent backgrounds, but larger files; 3) WebP is next-gen — better compression than both JPG and PNG, supports transparency, and all modern browsers support it. Prefer WebP; fall back to JPG/PNG for older browsers.
Q Why should I set
width and height attributes on images?A Two benefits: 1) Browsers know image dimensions before loading, reserving correct space and preventing layout shift; 2) Improves Core Web Vitals scores (CLS metric). Note: if you only set one attribute, the other scales proportionally. Responsive images typically set only
width and let height adapt automatically.Q MP3 and MP4 have great compatibility — why offer other formats?
A While MP3/MP4 have the best compatibility, other formats offer advantages: WebM is smaller, OGG is open-source free, WAV has the best quality. Multi-format fallback lets: 1) different browsers get the best experience; 2) poor networks choose smaller files; 3) smooth upgrades when new formats gain support. At minimum, provide MP3/MP4 as fallback, plus WebM/OGG as optimization.
📖 Summary
<img>embeds images;srcspecifies the path;altprovides alternative text<audio>embeds audio;controlsdisplays playback controls<video>embeds video; supportswidth/heightandpostercover image- Use
<source>to provide multiple media formats for browser compatibility
📝 Exercises
- Image practice: Insert an image with
altandtitleattributes, then changesrcto an invalid path and observe how the browser handles it. - Media player embedding: Use
<audio>and<video>to embed an audio file and a video file (you can use publicly available online resources).