Remove muted if you want sound. But then autoplay may not work. Either remove muted and accept that the user must click play, or keep muted for autoplay and let users unmute.
Question 20
Medium
Write an audio player with two source formats: 'song.mp3' and 'song.ogg', with controls.
audio tag with two source tags.
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
Your browser does not support audio.
</audio>
Question 21
Hard
What does the empty alt attribute mean: alt=""?
It is not a mistake.
An empty alt (alt="") tells screen readers that the image is decorative and should be skipped. It is valid and sometimes correct.
Question 22
Hard
This image is 4000 pixels wide but the page shows it as 500px. Fix it properly:
Ananya wants her image to be centered on the page but it is aligned left. Fix the HTML (not using CSS):
<img src="photo.jpg" alt="Photo" width="400">
HTML alone cannot center easily, but you can wrap in a block element.
<figure style="text-align:center">
<img src="photo.jpg" alt="Photo" width="400">
</figure>
<!-- Or better: use CSS externally -->
Question 25
Hard
Write a complete HTML page with a heading, an intro paragraph, a figure with an image and caption, a video player with poster, and an audio player. Use proper semantics and lazy loading where appropriate.
Combine figure, video, audio all in a complete page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Media Showcase</title>
</head>
<body>
<h1>My Media Showcase</h1>
<p>This page demonstrates HTML images, video, and audio.</p>
<figure>
<img src="photo.jpg" alt="My photo" width="400" loading="lazy">
<figcaption>A photo from my recent trip</figcaption>
</figure>
<h2>Watch My Video</h2>
<video width="600" controls poster="thumb.jpg">
<source src="video.mp4" type="video/mp4">
Your browser does not support video.
</video>
<h2>Listen to My Song</h2>
<audio controls>
<source src="song.mp3" type="audio/mpeg">
Your browser does not support audio.
</audio>
</body>
</html>
Mixed & Application Questions
Question 1
Easy
What attribute is required on every img tag?
For accessibility.
The alt attribute (for accessibility and fallback).
Question 2
Easy
Write HTML for an image 'logo.png' with alt 'Company Logo', width 200, height 100.
Both show the image but behave differently for some users.
Both show the image, but only the second has alt text, which is essential for screen readers, search engines, and fallback display if the image fails to load.
Question 7
Medium
Write HTML for a video that autoplays, loops, and has no sound (background video).
autoplay + muted + loop.
<video src="bg.mp4" autoplay muted loop></video>
Question 8
Medium
Vikram's image loads with a long delay. What attribute can make it faster for below-the-fold images?
An audio player with controls. However, in most modern browsers, autoplay with sound is blocked unless the user has interacted with the page first.
Question 10
Medium
Write HTML for a video tag with two source formats: MP4 ('clip.mp4') and WebM ('clip.webm'), with controls.
Use source tags inside video.
<video controls width="600">
<source src="clip.mp4" type="video/mp4">
<source src="clip.webm" type="video/webm">
Your browser does not support video.
</video>
The image is downloaded at full 8000x6000 resolution even though only 400px is displayed. Use a properly sized image file instead.
Question 12
Hard
What does this do?
<img src="photo.jpg" alt="" loading="lazy">
Empty alt has meaning.
Loads a decorative image (marked as decorative with empty alt) lazily — only when it scrolls into view. Screen readers skip it.
Question 13
Hard
Write HTML for a complete photo gallery page with 3 figures, each containing an image (placeholder URLs), alt text, figcaption, and lazy loading. Include full boilerplate.
It tells the browser not to preload any video data — only download when the user clicks play. Saves bandwidth but adds a delay when user plays.
Multiple Choice Questions
MCQ 1
Which tag displays an image?
A. <image>
B. <img>
C. <picture>
D. <photo>
Answer: B B is correct. The <img> tag displays images. <image> is not a valid tag. <picture> exists but wraps multiple sources.
MCQ 2
Which attribute specifies the image file?
A. href
B. src
C. source
D. file
Answer: B B is correct.src (source) points to the image file. href is for links, not images.
MCQ 3
Why is the alt attribute important?
A. It changes the image color
B. It is decorative only
C. It is for accessibility, SEO, and fallback if the image fails to load
D. It is optional and never needed
Answer: C C is correct. alt text serves three purposes: screen readers use it, search engines use it, and it displays if the image fails to load.
MCQ 4
Which tag plays video files?
A. <movie>
B. <video>
C. <film>
D. <play>
Answer: B B is correct. The <video> tag plays video files.
MCQ 5
Which attribute shows play/pause buttons on a video?
A. show
B. buttons
C. controls
D. player
Answer: C C is correct. The controls attribute shows the built-in video player controls.
MCQ 6
Which element wraps an image with its caption?
A. <caption>
B. <figure>
C. <img-caption>
D. <div>
Answer: B B is correct.<figure> wraps an image and its <figcaption> caption.
MCQ 7
Which tag plays audio files?
A. <sound>
B. <music>
C. <audio>
D. <speaker>
Answer: C C is correct. The <audio> tag plays audio files like MP3 and WAV.
MCQ 8
What does loading="lazy" do?
A. Loads the image slowly on purpose
B. Delays loading until the image is about to be visible
C. Makes the image blurry
D. Prevents the image from loading
Answer: B B is correct. Lazy loading delays loading until the image scrolls into view, making pages load faster initially.
MCQ 9
What does the poster attribute do?
A. Prints a poster
B. Sets the image shown before the video plays
C. Shows advertisements
D. Makes the video into a poster
Answer: B B is correct.poster is the preview image shown before the video starts playing.
MCQ 10
Why provide multiple tags in a video?
A. To play multiple videos at once
B. To support different browsers with different format preferences
C. For subtitles
D. It is required
Answer: B B is correct. Different browsers support different video formats. Multiple sources let the browser pick the first format it supports.
MCQ 11
To autoplay a video in a modern browser, which attribute must be included?
A. play
B. start
C. muted
D. auto
Answer: C C is correct. Modern browsers block autoplay videos with sound. You must also include muted for autoplay to work.
MCQ 12
Which is a valid image alt attribute for a decorative divider line?
A. alt="image"
B. alt="divider.jpg"
C. alt=""
D. No alt at all
Answer: C C is correct. For purely decorative images, use empty alt (alt=""). This tells screen readers to skip it. Never omit alt entirely.
MCQ 13
Which is a good source of free images?
A. Random Google image search results
B. Unsplash, Pexels, and Pixabay
C. Copy from other websites
D. Stock photo sites that require payment
Answer: B B is correct. Unsplash, Pexels, and Pixabay offer free, legal images you can use in your projects. Never steal copyrighted images.
MCQ 14
Which tag element wraps the image caption?
A. <caption>
B. <label>
C. <figcaption>
D. <text>
Answer: C C is correct.<figcaption> is the caption for an image inside a <figure>.
MCQ 15
What happens if an image with no alt attribute fails to load?
A. Shows the word 'image'
B. Shows the filename
C. Shows a broken image icon (or nothing meaningful)
D. Crashes the page
Answer: C C is correct. Without alt text, failed images just show a broken icon. With alt, the alt text displays instead, giving context.
MCQ 16
Why should you set width and height attributes on images?
A. To make them smaller
B. To reserve space and prevent layout shift while loading
C. It is required
D. For SEO
Answer: B B is correct. When the browser knows the dimensions, it can reserve the right amount of space before the image loads, preventing content from jumping around.
MCQ 17
What is the best way to handle a video that needs to autoplay as a background?
A. <video autoplay>
B. <video autoplay controls>
C. <video autoplay muted loop>
D. <video src="bg.mp4">
Answer: C C is correct. Background videos need autoplay + muted (so browser allows autoplay) + loop (so it replays). No controls since it is decorative.
MCQ 18
Which is TRUE about responsive images?
A. They need JavaScript
B. You can use srcset to provide multiple sizes for different screen densities
C. You always load the largest version
D. CSS cannot resize images
Answer: B B is correct. The srcset attribute lets you provide multiple image sizes. The browser picks the best one for the user's screen.
MCQ 19
Which is valid HTML for the img tag?
A. <img src="cat.jpg"></img>
B. <img>cat.jpg</img>
C. <img src="cat.jpg" alt="A cat">
D. <image src="cat.jpg">
Answer: C C is correct. img is self-closing, needs src and alt, and uses <img> not <image>.
MCQ 20
Why should you NOT use absolute file paths like C:/photos/cat.jpg in img src?
A. They are longer
B. They only work on your computer and break when the site is uploaded
C. HTML forbids them
D. Browsers cannot read them
Answer: B B is correct. Absolute paths from your computer only work locally. When you upload the site to a server, those paths no longer exist. Always use relative paths or URLs.
Coding Challenges
Challenge 1: Simple Image With Alt
Easy
Must include alt, width, and height attributes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Pet</title>
</head>
<body>
<h1>My Pet Dog</h1>
<p>Meet Buddy, my golden retriever who loves playing fetch.</p>
<img src="https://via.placeholder.com/400x300" alt="A golden retriever sitting on grass" width="400" height="300">
</body>
</html>
Challenge 2: Image With Caption
Easy
Must use figure and figcaption elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Indian Landmark</title>
</head>
<body>
<h1>Famous Indian Landmarks</h1>
<figure>
<img src="https://via.placeholder.com/500x350" alt="Taj Mahal, a white marble monument" width="500" height="350">
<figcaption>The Taj Mahal in Agra, built in 1653 by Emperor Shah Jahan in memory of his wife Mumtaz.</figcaption>
</figure>
</body>
</html>
Challenge 3: Image Gallery of 4 Photos
Medium
All 4 images must use figure, figcaption, descriptive alt, and loading="lazy".
Must use video tag with controls, poster, width, and source tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Video</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">
Your browser does not support the video tag.
</video>
<p>Click play to watch the video.</p>
</body>
</html>
Challenge 5: Audio Player
Medium
Must use audio tag with controls and two source tags.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Song</title>
</head>
<body>
<h1>Listen to My Song</h1>
<p>A peaceful melody for relaxation.</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>Song: Peaceful Morning<br>Artist: Aarav Singh</p>
</body>
</html>
Challenge 6: Recipe Page With Images
Hard
Must use figure and figcaption for all images, lazy loading, descriptive alt text, and proper HTML structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chocolate Chip Cookies</title>
</head>
<body>
<h1>Chocolate Chip Cookies</h1>
<p>Learn how to make soft and chewy chocolate chip cookies at home.</p>
<figure>
<img src="https://via.placeholder.com/600x400" alt="A plate of freshly baked chocolate chip cookies" width="600" height="400">
<figcaption>The finished cookies - golden brown and delicious</figcaption>
</figure>
<h2>Ingredients</h2>
<ul>
<li>2 cups flour</li>
<li>1 cup butter</li>
<li>1 cup sugar</li>
<li>2 eggs</li>
<li>1 cup chocolate chips</li>
</ul>
<h2>Steps</h2>
<figure>
<img src="https://via.placeholder.com/400x250" alt="Mixing butter and sugar in a bowl" width="400" height="250" loading="lazy">
<figcaption>Step 1: Mix the butter and sugar</figcaption>
</figure>
<figure>
<img src="https://via.placeholder.com/400x250" alt="Adding chocolate chips to the dough" width="400" height="250" loading="lazy">
<figcaption>Step 2: Fold in the chocolate chips</figcaption>
</figure>
<figure>
<img src="https://via.placeholder.com/400x250" alt="Cookies on a baking tray ready for the oven" width="400" height="250" loading="lazy">
<figcaption>Step 3: Bake at 180C for 12 minutes</figcaption>
</figure>
</body>
</html>
Challenge 7: Multi-Media Page
Hard
Must include all three media types with best practice attributes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Showcase</title>
</head>
<body>
<h1>My Media Showcase</h1>
<p>This page demonstrates images, video, and audio in HTML.</p>
<h2>Featured Image</h2>
<figure>
<img src="https://via.placeholder.com/500x350" alt="A scenic mountain landscape" width="500" height="350" loading="lazy">
<figcaption>The Himalayas at sunrise, photographed by Priya Sharma</figcaption>
</figure>
<h2>Watch the Video</h2>
<video width="600" controls poster="https://via.placeholder.com/600x400">
<source src="tour.mp4" type="video/mp4">
<source src="tour.webm" type="video/webm">
Your browser does not support video.
</video>
<h2>Listen to the Audio</h2>
<audio controls>
<source src="narration.mp3" type="audio/mpeg">
<source src="narration.ogg" type="audio/ogg">
Your browser does not support audio.
</audio>
</body>
</html>
Challenge 8: Complete Portfolio With Media
Hard
Must include nav, figure for images with captions, video with controls and poster, lazy loading, and contact links.
and