FSM Full Stack Masterclass
Platform under construction
HTML course badge

HTML Advanced

Advanced

HTML Media

Learn HTML Media with practical examples for rich HTML features, native browser behavior, accessibility, performance, SEO and live practice.

HTML advanced

HTML media turns a document into a richer experience, but every asset has a cost.

Media is the broad group of images, video, audio, captions, sources, posters, icons and embedded visual material inside a page.

Good media HTML is not only about showing something. It is about choosing the right format, loading it at the right time, describing it clearly and keeping the page fast.

A professional page treats media as content, not decoration by default. If media communicates meaning, that meaning must stay available when the file cannot be seen, heard or loaded.

img

Shows an image with meaningful alt text or empty alt when decorative.

video

Embeds video with controls, source files, poster images and captions.

audio

Embeds audio with controls, sources and transcripts when needed.

track

Adds captions, subtitles or descriptions to timed media.

Syntax and behavior

Media markup needs source files, fallbacks and accessibility information.

The browser can choose sources and show native controls, but you still decide meaning, loading behavior and fallback text.

Media with meaning and fallback

<figure>
  <video controls poster="/assets/video/lesson-poster.webp">
    <source src="/assets/video/lesson.webm" type="video/webm">
    <source src="/assets/video/lesson.mp4" type="video/mp4">
    <track src="/assets/video/captions.vtt" kind="captions" srclang="en" label="English">
    Your browser does not support embedded video.
  </video>
  <figcaption>Short lesson preview with captions.</figcaption>
</figure>

Heavy media without context

<video src="huge-file.mp4" autoplay></video>
<img src="photo.jpg">
<audio src="voice.mp3"></audio>

HTML quick reference

Reusable examples for quick reference.

Use these patterns when you need the syntax quickly. Each example has its own anchor, so search engines and readers can land directly on the exact pattern instead of only at the top of the lesson.

Semantic pattern

HTML pattern 1

A clean version of the markup from this lesson. Use it when you need the correct HTML shape quickly.

<figure>
  <video controls poster="/assets/video/lesson-poster.webp">
    <source src="/assets/video/lesson.webm" type="video/webm">
    <source src="/assets/video/lesson.mp4" type="video/mp4">
    <track src="/assets/video/captions.vtt" kind="captions" srclang="en" label="English">
    Your browser does not support embedded video.
  </video>
  <figcaption>Short lesson preview with captions.</figcaption>
</figure>
What this gives you

Meaningful markup that stays understandable before CSS and JavaScript are added.

Editable lab starter

HTML pattern 2

The starting point from the practice lab. Change the HTML first, then use CSS only for presentation.

<main class="demo-card">
  <figure>
    <div class="poster" role="img" aria-label="Abstract lesson preview"></div>
    <figcaption>Use captions and text alternatives for important media.</figcaption>
  </figure>
  <p>Media should support the lesson instead of slowing it down.</p>
</main>

<style>
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: Inter, system-ui, sans-serif;
  background: #07111f;
  color: white;
}

.demo-card {
  width: min(820px, calc(100% - 32px));
  padding: 34px;
  border-radius: 24px;
  background: #101a2d;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

h1 {
  margin: 0 0 16px;
  font-size: clamp(34px, 7vw, 58px);
  line-height: 1;
}

h2 {
  margin: 22px 0 10px;
}

p, li {
  color: #cfd8e6;
  line-height: 1.7;
}

button {
  border: 0;
  border-radius: 999px;
  padding: 12px 16px;
  background: #8cffc1;
  color: #07111f;
  font-weight: 900;
}

a { color: #8cffc1; font-weight: 900; }

.poster {
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  background: linear-gradient(135deg, #8cffc1, #4f8cff 48%, #ff6b7a);
}

figcaption { color: #cfd8e6; margin-top: 12px; }
</style>
What this gives you

A complete practice snippet that shows how the HTML behaves in context.

Pattern to avoid

HTML pattern 3

A weak pattern from the lesson. Use it as a warning sign when reviewing real pages.

<video src="huge-file.mp4" autoplay></video>
<img src="photo.jpg">
<audio src="voice.mp3"></audio>
What this gives you

A recognizable mistake you can search for and refactor.

Rules that matter

Advanced HTML is strongest when native behavior, accessibility and performance stay aligned.

These elements can create rich interfaces, but they still need clear purpose, safe fallbacks and production discipline.

Add alternatives

Images need alt text when meaningful. Video and audio often need captions or transcripts.

Avoid unnecessary autoplay

Autoplay can be intrusive and is often blocked unless muted.

Use modern formats

WebP, AVIF, WebM and optimized MP4 can reduce transfer size.

Control dimensions

Width, height and aspect-ratio prevent layout jumps.

Lazy-load where useful

Off-screen media should not always load immediately.

Keep fallbacks readable

Fallback text should explain what the user is missing.

Production thinking

Advanced features are useful only when they still serve the user.

Why does this matter?

This matters because media can make a page premium, but it can also make a page slow, inaccessible and hard to understand.

Accessibility

Media is accessible when the same information is available visually, audibly or textually. Captions, transcripts and alt text are not extras.

Production note

Media should be processed before deployment: correct size, compression, poster image, cache headers and privacy-aware third-party embeds.

SEO note

Search engines understand media better when filenames, surrounding text, captions, alt text and structured context describe the asset clearly.

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.

  • Add a second paragraph that explains what the media shows.
  • Change the figure into a real image example with img and alt.
  • Write one fallback sentence for a video that cannot load.

Practice assignment

Do this before moving to the next lesson.

  1. Pick one meaningful image, video or audio example.
  2. Write the accessible alternative text or transcript summary.
  3. Explain what you would optimize before putting it live.

Try it yourself

Create a media card

Live preview

Self-check

Before you continue, prove that you own this lesson.

Advanced

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.

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