HTML Media Elements

Media

Media elements add images, responsive sources, video and audio.

Media makes pages visual and useful, but it also creates performance and accessibility responsibility.

Images need useful alt text. Responsive images need the right source strategy. Video and audio need controls and alternatives where the content matters.

Element group: img, picture, video, audio. Images and rich media with accessibility and performance concerns.

What belongs here

Learn the tags by job, not by memorizing a random list.

`img`

Embeds an image and requires thoughtful alt text.

`picture, source`

Lets the browser choose different image sources.

`video`

Embeds video, usually with controls and captions.

`audio`

Embeds audio, usually with controls and transcripts.

Syntax in context

Media markup should describe and optimize the asset.

A media tag is not complete just because it displays. Think about alt text, dimensions, loading, controls and fallback.

<figure>
  <img src="lesson-dashboard.webp" alt="Code editor showing an HTML lesson dashboard" width="900" height="560" loading="lazy">
  <figcaption>HTML lesson dashboard preview.</figcaption>
</figure>

<video controls>
  <source src="lesson-intro.webm" type="video/webm">
</video>

Good versus weak

The difference is usually meaning, not only syntax.

Good

<figure>
  <img src="lesson-dashboard.webp" alt="Code editor showing an HTML lesson dashboard" width="900" height="560" loading="lazy">
  <figcaption>HTML lesson dashboard preview.</figcaption>
</figure>

<video controls>
  <source src="lesson-intro.webm" type="video/webm">
</video>

Weak

<img src="image1.jpg">
<video src="intro.mp4" autoplay></video>

Rules that matter

Use these rules before publishing real HTML.

Alt text matters

Describe meaningful images. Use empty alt only for decorative images.

Reserve dimensions

Width and height help prevent layout shift.

Use loading carefully

Lazy loading is useful for below-the-fold images.

Controls for media

Users should be able to pause, replay and control audio or video.

Production thinking

HTML is also for accessibility, SEO, security and maintenance.

Why does this matter?

Media matters because images and video are often the first thing people notice, but they are also where pages become slow or inaccessible. Good media HTML keeps the visual quality without sacrificing meaning or speed.

Accessibility

Images need text alternatives when they communicate meaning. Video often needs captions or transcripts.

Production note

Media is often the heaviest part of a page. Optimize formats, sizes and loading behavior before shipping.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

Change the image src to "cat.jpg".
Change the alt text so it describes the image you expected to load.
Run the preview and notice what happens when the browser cannot find the file.

Practice assignment

Do this before moving to the next lesson.

Change one meaningful part of the HTML, not only the visible text.
Run the preview and check whether the result still makes semantic sense.
Explain why the element or attribute you changed belongs in this exact place.

HTML CSS

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  gap: 14px;
  place-content: center;
  padding: 24px;
  box-sizing: border-box;
  font-family: system-ui, sans-serif;
  background: #07111f;
  color: #ffffff;
}

.demo-card {
  width: min(760px, calc(100vw - 48px));
  box-sizing: border-box;
  border-radius: 24px;
  padding: 28px;
  background: rgba(8, 12, 20, 0.94);
  border: 1px solid rgba(140, 255, 193, 0.26);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
}

.muted-card { color: #b8c4d6; }
.label, caption {
  color: #8cffc1;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1, h2, strong { color: #8cffc1; }
p, li, dd, figcaption { color: #d6deec; line-height: 1.65; }
a { color: #62d5ff; }
.highlight { color: #8cffc1; font-weight: 800; }
img, iframe, video, svg { max-width: 100%; border-radius: 18px; }
svg { width: 180px; height: 180px; fill: #8cffc1; }
svg text { fill: #07111f; font: 700 20px system-ui, sans-serif; }

input, button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 12px 14px;
  font: inherit;
}

button {
  margin-top: 16px;
  border: 0;
  background: #8cffc1;
  color: #07111f;
  font-weight: 900;
  cursor: pointer;
}

table { border-collapse: collapse; }
th, td { border: 1px solid rgba(255, 255, 255, 0.16); padding: 12px 14px; }
details { margin-top: 12px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 14px; padding: 14px 16px; }

Live preview

Self-check

Before you continue, prove that you own this lesson.

Intermediate

Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.

Can you explain what problem this lesson solves in a real website?
Can you identify the most important tag or attribute from this lesson?
Can you name one accessibility mistake this lesson helps prevent?
Can you write one good example and one weak example without copying the page?
Can you explain when you would use this in production and when you would avoid it?