Images, audio and video

Model answer.

Images:

<img src="campus-800.jpg"
     srcset="campus-400.jpg 400w, campus-800.jpg 800w, campus-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     width="800" height="450" loading="lazy"
     alt="Main academic block with students on the lawn">

• `alt` describes the image for screen readers, and is shown if the image fails. Describe the purpose; for purely decorative images use alt="", so they are skipped.
• `srcset` + `sizes` let the browser choose a file suited to the screen. `<picture>` with <source> lets you switch formats (AVIF/WebP with a JPEG fallback) or crop differently.
• `width`/`height` reserve space and prevent layout shift; `loading="lazy"` delays off-screen images.

Video and audio:

<video controls width="640" poster="tour-poster.jpg" preload="metadata">
  <source src="tour.webm" type="video/webm">
  <source src="tour.mp4" type="video/mp4">
  <track kind="captions" src="tour-en.vtt" srclang="en" label="English">
  Your browser cannot play this video. <a href="tour.mp4">Download it</a>.
</video>
<audio controls src="anthem.mp3"></audio>

controls shows the player; several <source> elements give format fallbacks; <track> adds captions (essential for accessibility); poster is the preview image. Autoplay generally only works when muted is also set.