Prev Next

HTML Media

HTML makes it easy to embed media like images, audio, and video. Using elements such as <img>, <audio>, and <video>, you can enrich web pages with multimedia content, enhancing user engagement and storytelling.

Key Topics

Images

Use <img> with src and alt attributes for responsive and accessible images.

Audio & Video

Example: The <audio> and <video> elements support controls, autoplay, and more.

<audio controls>
    <source src="sound.mp3" type="audio/mpeg">
</audio>

<video controls width="320" height="240">
    <source src="movie.mp4" type="video/mp4">
</video>

Media Example

This example shows an image and a video on the same page. A full code sample is provided below.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Media Example</title>
</head>
<body>
    <img src="images/photo.jpg" alt="Sample Photo" width="200">
    <video width="320" height="240" controls>
        <source src="video.mp4" type="video/mp4">
    </video>
</body>
</html>

Explanation: The image and video are displayed inline. The video offers playback controls, allowing users to start, pause, and adjust volume.

Key Takeaways

  • HTML integrates images, audio, and video seamlessly.
  • Use <img> for images and <audio>, <video> for media playback.
  • Always provide alt text for images to improve accessibility.
  • Offer controls and consider multiple source formats for best compatibility.
  • Media enriches user engagement and can tell stories more effectively.
Prev Next