Web Development - HTML Multimedia
HTML Multimedia
Multimedia on the web includes images, audio, and video. HTML makes it easy to add and control all these types of media.
Images in HTML
Images are added with the <img> tag.
It has two required attributes: src (source) and alt (alternative text).
Example
Display an image:
<img src="pic_trulli.jpg" alt="Trulli, Italy" width="400" height="300">
Try it Yourself »
The alt attribute provides text if the image cannot be displayed, improving accessibility.
Tip: Always include alt text for better SEO and accessibility.
HTML Audio
You can add sound to your pages using the <audio> element.
Example
Play an audio file:
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Try it Yourself »
The controls attribute adds play, pause, and volume buttons.
autoplay- plays the audio automaticallyloop- repeats the audio when finishedmuted- starts playback without sound
Note: Most browsers block autoplay unless the audio is muted.
HTML Video
Videos can be embedded using the <video> tag, similar to audio.
Example
Embed a video:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Try it Yourself »
The controls attribute shows playback controls like play, pause, and volume.
autoplay- starts playing automaticallymuted- starts without soundposter- defines an image to display before playback starts
Example
Video with poster image:
<video width="400" controls poster="thumbnail.jpg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Try it Yourself »
Embed External Videos
You can also embed videos from websites like YouTube using the <iframe> tag.
Example
Embed a YouTube video:
<iframe width="560" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
Try it Yourself »
Tip: Embedding YouTube videos is a great way to share content without hosting large files yourself.
Supported Formats
| Media Type | Format | File Extension |
|---|---|---|
| Video | MP4, WebM, Ogg | .mp4, .webm, .ogg |
| Audio | MP3, Ogg, WAV | .mp3, .ogg, .wav |
Best Practices
- Always include
controlsfor user accessibility. - Use multiple source formats for maximum browser compatibility.
- Include fallback text for older browsers.
- Optimize file sizes for faster loading.
Tip: Keep videos short and compressed for better performance.
Summary
<img>- display images<audio>- play audio files<video>- play video files<iframe>- embed external media like YouTube
Next, you'll learn about HTML Responsive Design - how to make your pages look great on any device or screen size.
