How to Add Images and Videos in HTML

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 20px; max-width: 800px; margin: 0 auto; }
    .media-container {
      margin: 20px 0;
      text-align: center;
    }
    img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    video {
      max-width: 100%;
      border-radius: 8px;
    }
    figure {
      margin: 0;
    }
    figcaption {
      margin-top: 10px;
      font-style: italic;
      color: #666;
    }
  </style>
</head>
<body>
  <h1>Media Elements</h1>
  
  <div class="media-container">
    <figure>
      <img src="https://via.placeholder.com/600x400/3b82f6/ffffff?text=Sample+Image" alt="Sample image">
      <figcaption>Figure 1: Sample image with caption</figcaption>
    </figure>
  </div>
  
  <div class="media-container">
    <video controls width="100%">
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </div>
  
  <div class="media-container">
    <audio controls>
      <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
      Your browser does not support the audio tag.
    </audio>
  </div>
</body>
</html>