Media formats overview in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Which media format is best for high-quality photos with transparency?

You want to display a photo on a website that has transparent areas and needs to look sharp. Which image format should you choose?

A PNG

B JPEG

C GIF

D BMP

💡 Hint

Think about which format supports transparency and good quality.

PNG supports transparency and lossless compression, making it ideal for sharp images with transparent parts.

JPEG does not support transparency and uses lossy compression.

GIF supports transparency but is limited to 256 colors, so not ideal for photos.

BMP is uncompressed and large in size.

📝 Syntax

intermediate

What is the correct HTML tag to embed an audio file?

You want to add an audio file to your webpage that users can play. Which HTML snippet is correct?

HTML

<audio src="song.mp3" controls></audio>

A <sound src="song.mp3" controls></sound>

B <audio src="song.mp3" controls></audio>

C <audio href="song.mp3" controls></audio>

D <media src="song.mp3" controls></media>

💡 Hint

Check the correct tag name and attribute for audio files.

The <audio> tag is used to embed audio files. The src attribute specifies the file, and controls adds play/pause buttons.

Other tags like <sound> or <media> do not exist in HTML5.

href is not valid for <audio>.

❓ rendering

advanced

What will the browser display with this video tag?

Consider this HTML code:

<video width="320" height="240" controls>
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

What will the user see if their browser supports MP4 but not WebM?

A The video from movie.mp4 will play.

B The text 'Your browser does not support the video tag.' will show.

C The video from movie.webm will play.

D No video or text will appear.

💡 Hint

Browsers try sources in order and pick the first supported format.

The browser tries the <source> elements in order. If it does not support the first format (WebM), it moves to the next (MP4).

Since the browser supports MP4, it will play that video.

The fallback text only shows if no sources are supported.

❓ selector

advanced

Which CSS selector targets all video elements with a 'controls' attribute?

You want to style all <video> tags that have the controls attribute. Which CSS selector is correct?

A video > controls

B video.controls

C video[controls]

D video#controls

💡 Hint

Attribute selectors use square brackets.

video[controls] selects all <video> elements with a controls attribute.

video.controls selects videos with class 'controls'.

video#controls selects video with id 'controls'.

video > controls looks for child elements named 'controls', which is invalid.

❓ accessibility

expert

How to make an image accessible for screen readers?

You have an image that shows a company logo. Which HTML snippet best helps screen readers understand the image?

A <img src="logo.png">

B <img src="logo.png" title="Company logo">

C <img src="logo.png" aria-hidden="true">

D <img src="logo.png" alt="Company logo">

💡 Hint

Screen readers rely on a specific attribute to describe images.

The alt attribute provides descriptive text for screen readers.

Option D has no description, so screen readers skip it or read the file name.

Option D hides the image from screen readers.

Option D shows a tooltip but does not help screen readers.

Practice

1. Which HTML tag is used to add a sound file to a web page?

easy

A. <audio>

B. <img>

C. <video>

D. <sound>

Solution

1. Step 1: Identify the tag for sound

   The <audio> tag is designed to embed sound files like music or voice recordings.

2. Step 2: Compare with other tags

   <img> is for images, <video> is for videos, and <sound> is not a valid HTML tag.

3. Final Answer:

   <audio> -> Option A

4. Quick Check:

   Sound tag = <audio> [OK]

Hint: Sound files use <audio>, images use <img> [OK]

Common Mistakes:

• Confusing <audio> with <video>
• Using <sound> which is not valid
• Choosing <img> for sound

2. Which of the following is the correct syntax to embed an image in HTML?

easy

A. <img src='image.jpg' alt='Description'>

B. <image src='image.jpg' alt='Description'>

C. <img href='image.jpg' alt='Description'>

D. <img src='image.jpg'>Description</img>

Solution

1. Step 1: Check the tag and attributes for image

   The correct tag is <img> with a src attribute for the file path and an alt attribute for accessibility.

2. Step 2: Validate the syntax

   <img> is self-closing and does not have a closing tag. The href attribute is incorrect for images.

3. Final Answer:

   <img src='image.jpg' alt='Description'> -> Option A

4. Quick Check:

   Image tag uses src and alt attributes [OK]

Hint: Use for images [OK]

Common Mistakes:

• Using <image> instead of <img>
• Using href instead of src
• Adding closing tag to <img>

3. What will the following HTML code display in a browser?

<video controls>
  <source src='movie.mp4' type='video/mp4'>
  <source src='movie.webm' type='video/webm'>
  Your browser does not support the video tag.
</video>

medium

A. An error message because multiple sources are not allowed

B. A video player with controls that plays movie.mp4 or movie.webm

C. Only the text 'Your browser does not support the video tag.'

D. A static image of the video without controls

Solution

1. Step 1: Understand the <video> tag with multiple sources

   The <video> tag can have multiple <source> elements to provide different video formats for browser compatibility.

2. Step 2: Analyze the controls attribute and fallback text

   The controls attribute shows play/pause buttons. The fallback text appears only if the browser cannot play any source.

3. Final Answer:

   A video player with controls that plays movie.mp4 or movie.webm -> Option B

4. Quick Check:

   Video tag with sources and controls shows player [OK]

Hint: Multiple sources provide fallback formats for video [OK]

Common Mistakes:

• Thinking multiple sources cause error
• Ignoring controls attribute
• Assuming fallback text always shows

4. Identify the error in this HTML snippet for embedding audio:

<audio src='sound.mp3' controls>
  <source src='sound.ogg' type='audio/ogg'>
</audio>

medium

A. The type attribute is invalid for audio sources

B. The controls attribute is missing

C. The <source> tag must be self-closing with />

D. The src attribute should not be used on <audio> when <source> is present

Solution

1. Step 1: Understand the use of src and source in <audio>

   When using <source> tags inside <audio>, the src attribute on <audio> should be omitted to avoid conflicts.

2. Step 2: Check other attributes and syntax

   The controls attribute is present, <source> tags do not require self-closing slash in HTML5, and type is valid.

3. Final Answer:

   Using src on <audio> with <source> tags is incorrect -> Option D

4. Quick Check:

   Use either src or source tags, not both [OK]

Hint: Use <source> tags inside <audio>, avoid src on <audio> [OK]

Common Mistakes:

• Using src on <audio> with <source> tags
• Thinking <source> must be self-closing
• Believing type attribute is invalid

5. You want to add a video that plays automatically, loops forever, and is muted by default for accessibility. Which HTML snippet correctly achieves this?

hard

A. <video src='clip.mp4' autoplay muted></video>

B. <video src='clip.mp4' autoplay loop></video>

C. <video src='clip.mp4' autoplay loop muted controls></video>

D. <video src='clip.mp4' loop muted controls></video>

Solution

1. Step 1: Identify required attributes for video behavior

   To play automatically, use autoplay. To loop forever, use loop. To mute sound by default, use muted. Controls help user control playback.

2. Step 2: Check each option for all attributes

   <video src='clip.mp4' autoplay loop muted controls></video> has all: autoplay, loop, muted, and controls. Others miss one or more attributes.

3. Final Answer:

   <video src='clip.mp4' autoplay loop muted controls></video> -> Option C

4. Quick Check:

   All needed attributes present in <video src='clip.mp4' autoplay loop muted controls></video> [OK]

Hint: Use autoplay, loop, muted together for auto-looping muted video [OK]

Common Mistakes:

• Omitting muted causes sound to play unexpectedly
• Forgetting loop to repeat video
• Missing controls reduces user control