What is Media formats overview in HTML?

HTMLmarkup~5 mins

Media formats overview in HTML

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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.