HTML Media

Foundation of multimedia content in web pages

🎬 What is HTML Media?

HTML media refers to multimedia content like images, videos, and audio that you can embed directly into your web pages. This makes your website more engaging and interactive! 


<!-- Basic media elements -->
<img src="photo.jpg" alt="Beautiful landscape">
<video controls><source src="movie.mp4"></video>
<audio controls><source src="music.mp3"></audio>

Types of HTML Media

🖼️

Images

Static visual content for your pages 

<img src="image.jpg" alt="Description">
🎥

Videos

Moving pictures with sound 

<video controls>
  <source src="movie.mp4">
</video>
🎵

Audio

Sound files and music 

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

Embedded Content

External media and plugins 

<iframe src="content.html"></iframe>

🔹 Basic Image Element

Images are the foundation of web media. Here's how to add them: 

<img src="landscape.jpg" 
     alt="Beautiful mountain landscape" 
     width="400" 
     height="300">

Output:

Beautiful mountain landscape

🔹 Essential Image Attributes

Every image should have these important attributes:

Required Attributes:

  • src: Path to the image file
  • alt: Alternative text for accessibility

Optional Attributes:

  • width/height: Image dimensions
  • title: Tooltip text on hover
  • loading: "lazy" for performance 
<!-- Complete image example -->
<img src="photo.jpg" 
     alt="Person hiking in mountains" 
     width="500" 
     height="300"
     title="Click to view larger"
     loading="lazy">

🔹 Responsive Images

Make images adapt to different screen sizes: 

<!-- Responsive image -->
<img src="responsive-image.jpg" 
     alt="Responsive design example" 
     style="max-width: 100%; height: auto;">

<!-- Using CSS classes -->
<img src="image.jpg" alt="Description" class="responsive-image">

Output:

Responsive design example

This image scales with the container size

🔹 Image Formats Guide

Choose the right format for your images:

Common Image Formats:

  • JPEG (.jpg): Best for photos with many colors
  • PNG (.png): Best for graphics with transparency
  • GIF (.gif): Best for simple animations
  • SVG (.svg): Best for scalable graphics and icons
  • WebP (.webp): Modern format with better compression

🧠 Test Your Knowledge

Which attribute is required for accessibility in images?