Media: Images, Video & Audio

The web became the web when it stopped being text-only. This module covers every tag you need to embed visual and audio media - and how to do it accessibly and efficiently.

The Image Element (<img>)

The <img> tag embeds an image into a page. It is a void element - it has no closing tag.

An important concept: images are not inserted into your HTML file. The <img> tag creates a reserved space, and the browser fetches the image from the address you provide. Think of it as an empty picture frame on a wall - the frame stays there; the src attribute tells it which photo to display.

Core Attributes

src (Source) - Mandatory

The path to the image. Can be a local file or a URL.

<!-- Local file -->
<img src="images/logo.png" alt="SkyBrance logo" />

<!-- External URL -->
<img src="https://example.com/photo.jpg" alt="Landscape photo" />

alt (Alternative Text) - Always Required

A text description of the image. This is not optional in professional work.

• Displayed if the image fails to load
• Read aloud by screen readers to blind users
• Used by search engines to understand visual content

<img src="sunset.jpg" alt="Orange sunset over mountain peaks" />

If an image is purely decorative (a background texture, a visual divider), leave the alt empty. This tells screen readers to skip it entirely:

<img src="divider.png" alt="" />

width and height

Reserves the exact space for the image before it loads. Without these, the page "jumps" as images load in - a terrible user experience.

<img src="hero.jpg" alt="Team photo" width="1200" height="600" />

loading="lazy"

Defers loading until the user scrolls close to the image. This makes initial page load significantly faster, especially on image-heavy pages.

<img
  src="article-photo.jpg"
  alt="Code on a screen"
  loading="lazy"
  width="800"
  height="450"
/>

Complete Example

<img
  src="images/skybrance-team.jpg"
  alt="The SkyBrance team at the 2026 summit"
  width="1200"
  height="600"
  loading="lazy"
/>

Pro tip: Never skip the alt attribute. If you delete it entirely (rather than leaving it empty), screen readers may read out the filename - "image-001-final-v2-compressed.jpg" - which is a terrible experience.

---

Figure & Figcaption (<figure>, <figcaption>)

The <figure> tag wraps self-contained visual content - illustrations, diagrams, photos, or even code snippets. The <figcaption> tag adds a visible caption that belongs to that content.

Think of a museum exhibit. You don't just stick a painting on the wall; you put it in a display case (<figure>) with a plaque underneath naming the artist and year (<figcaption>). The two are permanently linked - move the figure, the caption comes with it.

Before HTML5, developers used a <div> for this, and the browser had no way to know the caption text was related to the image. <figure> creates that semantic relationship.

<figure>
  <img
    src="mona-lisa.jpg"
    alt="The Mona Lisa painting by Leonardo da Vinci"
    width="400"
    height="600"
  />
  <figcaption>
    Fig. 1 - The Mona Lisa, Leonardo da Vinci, c. 1503–1519.
  </figcaption>
</figure>

Pro tip: <figure> is not just for images. You can use it for code blocks, quotes, poems, or charts - anything that is a self-contained unit referenced in the surrounding text.

---

The Video Element (<video>)

The <video> tag embeds a media player directly into the page. Think of it as a television set - the tag is the TV, src is the channel, and controls is the remote control.

<video width="800" controls poster="thumbnail.jpg">
  <source src="lesson-intro.mp4" type="video/mp4" />
  <source src="lesson-intro.webm" type="video/webm" />
  Your browser does not support the video tag.
</video>

Key Attributes

Attribute	Effect
controls	Shows play/pause, volume, and progress bar
autoplay	Starts playing immediately (requires muted in most browsers)
muted	Starts with sound off
loop	Replays when finished
poster	Shows a thumbnail image before playback starts
width / height	Sets the player dimensions

The <source> child tags let you provide multiple formats. The browser picks the first one it can play - MP4 for most browsers, WebM as a fallback.

The fallback text ("Your browser does not support...") only appears on very old devices that can't play video at all.

---

The Audio Element (<audio>)

The <audio> tag works almost identically to <video>, but without the visual component. Think of it as an embedded radio or MP3 player.

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

Key Attributes

Attribute	Effect
controls	Essential. Without this, the audio is invisible and the user cannot stop it
autoplay	Plays immediately on page load - generally bad practice
loop	Repeats the audio track indefinitely
muted	Starts silently

Pro tip: Autoplay audio is widely considered bad web etiquette - nobody wants a website screaming at them. Most browsers block autoplay with sound unless the user has interacted with the page first. If you must use it (background music on a dedicated audio page), pair it with muted: <audio autoplay muted loop>.