learn2kode.in

Menu

HTML Tutorial

Menu

HTML Media

HTML provides several tags to embed and control different types of media—such as images, audio, video, and external content—inside a webpage. These media elements make websites more interactive and visually appealing.

1. Images (<img>)

Used to display pictures or graphics.

Copy Text 
<img src="image.jpg" alt="Description" width="300">

Important Attributes

Attribute Description
src File path (URL) of the image
alt Text shown if the image fails to load
width / height Resize the image
loading="lazy" Loads image only when needed

2. Audio (<audio>)

Used to embed sound clips, music, or voice recordings.

Copy Text 
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support audio.
</audio>

Features

Attribute Description
controls Shows play/pause UI
autoplay Plays automatically
loop Repeats audio
muted Starts muted
preload How the audio file loads (auto, metadata, none)

3. Video (<video>)

Used for embedding videos.

Copy Text 
<video controls width="500">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support video.
</video>

4. <iframe>

Used to embed another webpage, video player (YouTube), or maps.

Copy Text 
<iframe src="https://www.youtube.com/embed/xyz123" width="560" height="315"></iframe>

Common Uses

  • Embedding YouTube videos
  • Embedding Google Maps
  • Embedding external websites

5. <figure> and <figcaption>

Used to group media with captions.

Copy Text 
<figure>
  <img src="mountain.jpg" alt="Mountain">
  <figcaption>Beautiful mountain view</figcaption>
</figure>

6. <source> Element

Provides multiple media formats for compatibility.

Copy Text 
<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

7. <track>

Adds subtitles/captions to videos.

Copy Text 
<video controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

Summary Table of Media Elements

Media Tag Purpose
<img> Embed images
<audio> Embed audio clips
<video> Embed videos
<source> Supports multiple media formats
<track> Add subtitles or captions
<iframe> Embed external content (webpages, maps, videos)
<figure> Group media content
<figcaption> Caption for media (inside figure)
HTML Video Element