HTML Images & Multimedia

HTML Image Tag (<img>)

The <img> tag is used to embed images into a webpage. It is a self-closing tag that requires at least the src and alt attributes.

<img src="images/photo.jpg" alt="A beautiful scenery">

- src: Path to the image file.
- alt: Alternative text for accessibility and in case the image doesn't load.

Image Attributes and Optimization

Images can be optimized for better performance and responsiveness. Common attributes include width, height, and loading.

<img 
  src="images/landscape.jpg" 
  alt="Landscape photo" 
  width="400" 
  height="300" 
  loading="lazy">

• width / height: Controls the display size of the image (not the actual file size).
• loading="lazy": Defers image loading until it’s visible in the viewport, improving page speed.

HTML Audio Tag

The <audio> tag is used to play audio files. The controls attribute adds playback controls like play, pause, and volume.

<audio controls>
  <source src="audio/music.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

You can include multiple <source> tags to support different file formats like .mp3, .ogg, etc.

HTML Video Tag

The <video> tag allows you to embed video content. Like audio, it supports controls and other optional attributes like autoplay, muted, and poster.

<video width="600" controls>
  <source src="videos/sample.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Note: Use multiple <source> tags for cross-browser compatibility (e.g., WebM, Ogg).

Embedding YouTube Videos

You can embed YouTube videos using an <iframe>. This allows you to show videos directly from YouTube within your webpage.

<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
  title="YouTube video player" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
  allowfullscreen>
</iframe>

Replace the src link with the embed URL of any YouTube video you want to display.

Conclusion

Adding multimedia elements like images, audio, and video enhances the interactivity and appeal of a web page. Always ensure media files are optimized for performance and accessible to all users.

In the next chapter, we’ll cover how to use HTML Lists to organize content effectively using ordered, unordered, and definition lists.

If you have any questions, feel free to ask. Thank you for reading!