HTML allows you to embed media (like audio and video) and create galleries (collections of images or media items) to make websites more engaging.

---

1. Media in HTML

a) Images

• Added with <img> tag (as explained earlier).
• Example:

<img src="nature.jpg" alt="Nature" width="300">

---

b) Audio

• Added with <audio> tag.
• Supports formats like MP3, WAV, OGG.
• Example:

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

Attributes:

• controls → shows play/pause buttons.
• autoplay → plays automatically (not recommended without user consent).
• loop → repeats playback.

---

c) Video

• Added with <video> tag.
• Supports MP4, WebM, Ogg.
• Example:

<video width="400" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

Attributes:

• controls → playback UI.
• autoplay, loop, muted available.
• poster → placeholder image before play.

---

d) Embedding External Media

• Using <iframe> for YouTube, Google Maps, etc.

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" 
title="YouTube video" frameborder="0" allowfullscreen></iframe>

---

2. Creating a Gallery in HTML

A gallery is usually a collection of images or videos displayed in a grid or slideshow format.

a) Simple Image Gallery

<h2>My Gallery</h2>
<img src="img1.jpg" alt="Image 1" width="200">
<img src="img2.jpg" alt="Image 2" width="200">
<img src="img3.jpg" alt="Image 3" width="200">

Note: This displays images in a row. CSS can make it prettier.

---

b) Image Gallery with Links

<a href="img1_large.jpg"><img src="img1_thumb.jpg" alt="Image 1" width="150"></a>
<a href="img2_large.jpg"><img src="img2_thumb.jpg" alt="Image 2" width="150"></a>

---

c) Video Gallery

<video width="250" controls>
  <source src="clip1.mp4" type="video/mp4">
</video>
<video width="250" controls>
  <source src="clip2.mp4" type="video/mp4">
</video>

---

d) Responsive Gallery (HTML + CSS Idea)

HTML:

<div class="gallery">
  <img src="img1.jpg" alt="Image 1">
  <img src="img2.jpg" alt="Image 2">
  <img src="img3.jpg" alt="Image 3">
</div>

CSS (basic):

.gallery img {
  width: 30%;
  margin: 5px;
}

---

3. Best Practices

• Always use alt for images for accessibility.
• Compress media for faster loading.
• Use modern formats like WEBP for images and MP4/WebM for videos.
• Keep galleries responsive for mobile devices.

---