Bird
Raised Fist0
HTMLmarkup~5 mins

Media formats overview in HTML

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Media formats let you add pictures, sounds, and videos to your web pages. They help make websites more interesting and easy to understand.

You want to show a photo of a product on your website.
You want to play background music or sound effects on a page.
You want to add a video tutorial or demo for visitors.
You want to use icons or graphics to explain ideas visually.
You want to make your website more engaging with multimedia.
Syntax
HTML
<img src="image.jpg" alt="Description">
<audio src="sound.mp3" controls></audio>
<video src="video.mp4" controls></video>

<img> is for images and needs an alt attribute for accessibility.

<audio> and <video> tags can have controls so users can play, pause, or adjust volume.

Examples
This shows a red flower image with a description for screen readers.
HTML
<img src="flower.png" alt="A red flower">
This adds a music player with play and pause buttons.
HTML
<audio src="music.mp3" controls></audio>
This shows a video player with controls and sets its size.
HTML
<video src="clip.mp4" controls width="320" height="240"></video>
Sample Program

This webpage shows an image, an audio player, and a video player with controls. It uses accessible labels and responsive design basics.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Media Formats Example</title>
</head>
<body>
  <header>
    <h1>Media Formats Overview</h1>
  </header>
  <main>
    <section>
      <h2>Image Example</h2>
      <img src="https://via.placeholder.com/150" alt="Placeholder image">
    </section>
    <section>
      <h2>Audio Example</h2>
      <audio src="https://www.w3schools.com/html/horse.mp3" controls aria-label="Horse sound"></audio>
    </section>
    <section>
      <h2>Video Example</h2>
      <video src="https://www.w3schools.com/html/mov_bbb.mp4" controls width="320" height="240" aria-label="Big Buck Bunny video"></video>
    </section>
  </main>
  <footer>
    <p>All media are examples from placeholder sources.</p>
  </footer>
</body>
</html>
OutputSuccess
Important Notes

Always add alt text for images to help people using screen readers.

Use the controls attribute on audio and video so users can control playback.

Choose media formats that work well on most devices, like JPEG or PNG for images, MP3 for audio, and MP4 for video.

Summary

Media formats let you add images, sounds, and videos to web pages.

Use <img> for pictures, <audio> for sounds, and <video> for videos.

Always make media accessible and easy to control for all users.

Practice

(1/5)
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
Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard