Media formats overview in HTML - Mini Project: Build & Apply

Media formats overview

📖 Scenario: You are creating a simple webpage to show different types of media formats used on the web. This page will help users understand how images, audio, and video files are embedded in HTML.

🎯 Goal: Build a basic HTML page that includes an image, an audio player, and a video player with proper semantic tags and accessibility features.

📋 What You'll Learn

Use semantic HTML5 elements like <main> and <section>.

Include an image with an alt attribute describing the image.

Add an audio player with controls and a descriptive label.

Add a video player with controls and a descriptive label.

Ensure the page has a <header> with a title and a <footer> with copyright info.

Make the page responsive and accessible.

💡 Why This Matters

🌍 Real World

Websites often need to display images, audio, and video content clearly and accessibly for all users.

💼 Career

Knowing how to embed media with proper HTML and accessibility is essential for front-end web developers and content creators.

1

Create the basic HTML structure

Create a basic HTML5 skeleton with lang="en" in the <html> tag. Inside the <body>, add a <header> containing an <h1> with the text Media Formats Overview. Then add a <main> element where media content will go.

HTML

    
    
    Media Formats Overview



    


    

Hint

Start with the basic HTML5 page structure. Use <header> for the page title and <main> for the main content area.

2

Add an image with alt text

Inside the <main> element, add a <section> with a heading <h2> that says Image Example. Then add an <img> tag with the source "https://via.placeholder.com/300" and an alt attribute with the text Placeholder image showing a gray box.

HTML

    
    
    Media Formats Overview



    Media Formats Overview


    

Hint

Use a <section> to group the image and its heading. Always add meaningful alt text for images.

3

Add an audio player with controls and label

Below the image section, add another <section> with a heading <h2> that says Audio Example. Inside it, add an <audio> element with the controls attribute. Use the source "https://www.w3schools.com/html/horse.mp3" and add a aria-label attribute with the text Sample audio of a horse sound.

HTML

    
    
    Media Formats Overview



    Media Formats Overview


    
        Image Example
        
    
    

Hint

Use the <audio> tag with controls and an aria-label for accessibility. Include a <source> inside the audio tag.

4

Add a video player and footer

Below the audio section, add a new <section> with a heading <h2> that says Video Example. Inside it, add a <video> element with the controls attribute and an aria-label of Sample video of a running horse. Use the source "https://www.w3schools.com/html/mov_bbb.mp4" with type video/mp4. Finally, add a <footer> below <main> with the text © 2024 Media Formats Tutorial.

HTML

    
    
    Media Formats Overview



    Media Formats Overview


    
        Image Example
        
    
    
        Audio Example
        
            
            Your browser does not support the audio element.
        
    
    

Hint

Use the <video> tag with controls and an aria-label. Add a <footer> outside the <main> for page footer content.

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