Images, Audio, and Video

What Is It?

What Are Images and Media in HTML?

A web page with only text is boring. Images, videos, and audio are what make web pages come alive. A beautiful photograph, an instructional video, or a background music clip — all of these are added using HTML media tags.

HTML gives you a handful of powerful tags to add media to your pages:

• <img> — for images
• <video> — for video files
• <audio> — for music and sound
• <figure> and <figcaption> — for images with captions
• <source> — for providing multiple formats to the browser

All of these are self-closing or specialised tags that let your page show pictures and play media without needing any JavaScript.

Why Does It Matter?

Why Add Media to Your Pages?

1. Humans Love Visuals

Our brains process images 60,000 times faster than text. A single well-chosen photo can communicate more than a whole paragraph of words. When building a recipe page, a product page, or a blog — images make content instantly understandable and engaging.

2. Accessibility Through Alt Text

Every image should have alt text (alternative text) — a short description that screen readers read aloud for blind users. Alt text also appears if the image fails to load. Good alt text makes your website work for everyone.

3. SEO Benefits

Google cannot 'see' images directly — it reads alt text to understand what an image is about. Pages with descriptive alt text rank higher in image search results. So good alt text means more visitors.

4. Native Video and Audio

Before HTML5 (2014), you needed Flash plugins to play videos. Now, <video> and <audio> are built right into HTML. Any modern browser can play media without installing anything.

5. Creative Freedom

Once you know image and media tags, you can build photo galleries, recipe sites with step images, music players, video tutorials, and so much more. Your pages stop looking like text documents and start looking like real websites.

Detailed Explanation

Detailed Explanation

The img Tag

The <img> tag is self-closing (no closing tag). It has two essential attributes:

• src — the source (URL or path to the image file)
• alt — alternative text describing the image

<img src="cat.jpg" alt="An orange cat sitting on a window sill">

The src can be a relative path (cat.jpg, images/cat.jpg) or a full URL (https://example.com/cat.jpg).

Why alt Text Is Required

The alt attribute is not optional — it is essential. Here is why:

1. Accessibility: Screen readers announce the alt text to blind users
2. SEO: Google uses it to understand what your image shows
3. Fallback: If the image fails to load (slow connection, broken URL), the browser shows the alt text instead

Good alt text describes what the image shows, not just 'image' or 'picture'. For decorative images with no meaning, use alt="" (empty string) — this tells screen readers to skip it.

Width and Height Attributes

You can set the dimensions of an image with width and height attributes (in pixels):

<img src="cat.jpg" alt="A cat" width="300" height="200">

Always set these attributes — they tell the browser how much space to reserve for the image before it loads, which prevents the page layout from jumping around.

figure and figcaption

When an image needs a caption, wrap it in a <figure> element with a <figcaption>:

<figure>
  <img src="eiffel.jpg" alt="Eiffel Tower">
  <figcaption>The Eiffel Tower in Paris, built in 1889.</figcaption>
</figure>

This is the semantic way to associate a caption with an image. Screen readers understand the relationship.

The video Tag

The <video> tag plays video files. Basic syntax:

<video src="movie.mp4" controls width="600">
  Your browser does not support video.
</video>

Common attributes:

• src — path to the video file
• controls — shows play/pause/volume controls
• width and height — video player size
• autoplay — starts playing automatically (use carefully)
• muted — starts muted (required for autoplay in most browsers)
• loop — replays when finished
• poster — image shown before the video plays
• preload — how much to preload (none/metadata/auto)

The text inside the <video> tag is shown if the browser cannot play video (very old browsers).

The source Tag for Multiple Formats

Different browsers support different video formats. To be safe, provide multiple formats using <source> tags inside <video>:

<video controls width="600">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser does not support video.
</video>

The browser picks the first format it can play. MP4 works almost everywhere, so it should usually be listed first.

The audio Tag

The <audio> tag works similarly to video. It plays sound files:

<audio src="song.mp3" controls>
  Your browser does not support audio.
</audio>

It has the same attributes as video: controls, autoplay, muted, loop, and can also use <source> tags for multiple formats.

Responsive Images with srcset

Modern phones have different screen densities. A 'retina' display needs bigger images than a regular monitor. The srcset attribute lets you provide multiple sizes:

<img src="photo.jpg" srcset="photo-1x.jpg 1x, photo-2x.jpg 2x" alt="Photo">

The browser automatically picks the best size based on the user's screen.

Lazy Loading

By default, browsers load all images on a page immediately. This can slow down pages with many images. The loading="lazy" attribute tells the browser to wait until an image is about to scroll into view:

<img src="big-photo.jpg" alt="A photo" loading="lazy">

This makes pages much faster, especially for image galleries. Use loading="lazy" for images below the fold (not visible when the page first loads).

Where to Get Free Images

For practice and projects, use free image sites that allow commercial use:

• Unsplash (unsplash.com) — high-quality photos
• Pexels (pexels.com) — free photos and videos
• Pixabay (pixabay.com) — photos, illustrations, and videos
• placeholder.com or via.placeholder.com — placeholder images while developing

Never steal images from random websites — many are copyrighted. Always use images you have permission to use.

Code Examples

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Image</title>
</head>
<body>
  <h1>My Pet</h1>
  <p>Meet Buddy, my golden retriever.</p>
  <img src="https://via.placeholder.com/400x300" alt="A golden retriever dog sitting on grass" width="400" height="300">
  <p>He loves playing fetch and going for walks.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Famous Landmarks</title>
</head>
<body>
  <h1>Famous Indian Landmarks</h1>
  <figure>
    <img src="https://via.placeholder.com/500x300" alt="Taj Mahal, white marble monument" width="500" height="300">
    <figcaption>The Taj Mahal in Agra, built by Shah Jahan in memory of his wife.</figcaption>
  </figure>
  <figure>
    <img src="https://via.placeholder.com/500x300" alt="India Gate at night with lights" width="500" height="300">
    <figcaption>India Gate in New Delhi, a war memorial for Indian soldiers.</figcaption>
  </figure>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Photo Gallery</title>
</head>
<body>
  <h1>Priya's Photo Gallery</h1>
  <h2>Recent Photos</h2>

  <figure>
    <img src="https://via.placeholder.com/300x200" alt="Sunrise over the mountains" width="300" height="200" loading="lazy">
    <figcaption>Sunrise at Manali</figcaption>
  </figure>

  <figure>
    <img src="https://via.placeholder.com/300x200" alt="Waves crashing on a beach" width="300" height="200" loading="lazy">
    <figcaption>Goa Beach</figcaption>
  </figure>

  <figure>
    <img src="https://via.placeholder.com/300x200" alt="A plate of biryani" width="300" height="200" loading="lazy">
    <figcaption>Hyderabadi Biryani</figcaption>
  </figure>

  <figure>
    <img src="https://via.placeholder.com/300x200" alt="Colourful rangoli design" width="300" height="200" loading="lazy">
    <figcaption>Diwali Rangoli</figcaption>
  </figure>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video Example</title>
</head>
<body>
  <h1>Watch My Video</h1>
  <video width="600" controls poster="https://via.placeholder.com/600x400">
    <source src="my-video.mp4" type="video/mp4">
    <source src="my-video.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>
  <p>This video shows highlights from my school trip.</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Audio Example</title>
</head>
<body>
  <h1>Rohan's Favourite Song</h1>
  <p>Click play to listen:</p>
  <audio controls>
    <source src="song.mp3" type="audio/mpeg">
    <source src="song.ogg" type="audio/ogg">
    Your browser does not support the audio element.
  </audio>
  <p>Title: 'My Melody'<br>Artist: The Code Band</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Background Video</title>
</head>
<body>
  <h1>Hero Section</h1>
  <video width="800" autoplay muted loop playsinline>
    <source src="background.mp4" type="video/mp4">
    Your browser does not support video.
  </video>
  <p>This is how modern websites add looping background videos.</p>
</body>
</html>

Common Mistakes

<img src="cat.jpg">

<img src="cat.jpg" alt="An orange tabby cat sitting on a windowsill">

<img src="C:\Users\Priya\Desktop\cat.jpg" alt="Cat">

<img src="images/cat.jpg" alt="Cat">

<video src="movie.mp4" width="600"></video>

<video src="movie.mp4" width="600" controls></video>

<video src="movie.mp4" autoplay></video>

<video src="movie.mp4" autoplay muted></video>

<img src="file:///C:/photos/cat.jpg" alt="Cat">

<img src="https://example.com/photos/cat.jpg" alt="Cat">
<!-- Or a relative path: -->
<img src="photos/cat.jpg" alt="Cat">

Summary