Multimedia, Audio, Video, Embeds, Figures, and Rich Content
Add media responsibly using modern HTML elements while keeping usability, accessibility, and performance in mind.
Inside this chapter
- Media on the Web
- Audio and Video Basics
- Figure and Figcaption
- Embeds and External Content
- Accessibility and Captions
- Practical Example
Series navigation
Study the chapters in order for the clearest path from HTML basics and document structure to semantics, accessibility, SEO, maintainability, and advanced markup practice. Use the navigation at the bottom to move smoothly through the full tutorial series.
Media on the Web
Modern HTML supports images, audio, video, and embedded resources directly. Students should understand that rich media affects not only user experience, but also accessibility, bandwidth, loading performance, and content structure.
Audio and Video Basics
<audio controls>
<source src="podcast.mp3" type="audio/mpeg" />
</audio>
<video controls width="640">
<source src="demo.mp4" type="video/mp4" />
</video>Figure and Figcaption
<figure>
<img src="chart.png" alt="Revenue growth chart" />
<figcaption>Quarterly revenue growth from Q1 to Q4</figcaption>
</figure>This pairing helps present visual content with explanatory meaning.
Embeds and External Content
Sometimes pages embed maps, videos, documents, or external widgets. Students should understand that external embeds can affect performance, privacy, and maintainability.
Accessibility and Captions
Media should be supported by captions, transcripts, alternative descriptions, or fallback text when appropriate. Rich content that excludes users is not high-quality content.
Practical Example
An online training page may include an instructional video, downloadable PDF, figure captions for diagrams, and an audio snippet for pronunciation examples. Strong HTML helps organize and label all of that meaningfully.