Introduction

HTML provides built-in tags for displaying images, audio, and video directly in the browser. These media elements are essential for building modern, interactive websites.

1. The <img> Tag

Used to embed images.

• src – file path or URL
• alt – description for accessibility
• width/height – size control

2. The <audio> Tag

Embeds audio files like MP3.

Attributes:

• controls – show play/pause UI
• autoplay – start automatically
• loop – repeat
• muted – start muted

3. The <video> Tag

Embeds video files directly in the browser.

Video Attributes:

• controls – default browser UI
• autoplay
• loop
• poster – preview image

4. Multiple Sources

Browsers support different formats. You can provide multiple sources to maximize compatibility.

5. Embedding YouTube Videos

Use an iframe for YouTube or Vimeo.

6. The <picture> Element

Responsive images with different resolutions or formats.

7. The <figure> and <figcaption> Tags

Add captions to media.

Summary

• <img> for images
• <audio> for sound
• <video> for video
• <iframe> for YouTube and embeds
• <picture> for responsive images
• <figure> + <figcaption> for captions