FSM Full Stack Masterclass
Platform under construction
HTML course badge

HTML Links & Media

Intermediate

Picture Element

Learn Picture Element with practical HTML examples for navigation, images, alt text, media behavior, metadata, accessibility, SEO and live practice.

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.

<picture>
  <source media="(max-width: 700px)" srcset="/assets/img/course-mobile.webp">
  <source type="image/avif" srcset="/assets/img/course.avif">
  <img
    src="/assets/img/course.webp"
    alt="Student dashboard on a laptop screen"
    width="960"
    height="540"
  >
</picture>
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">
  <p class="eyebrow">Picture</p>
  <h1>Different sources, one image meaning.</h1>
  <picture>
    <source media="(max-width: 700px)" srcset="mobile-course.webp">
    <img src="desktop-course.webp" alt="Course dashboard preview" width="800" height="450">
  </picture>
  <p>The img fallback still carries the alt text.</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(780px, calc(100% - 32px));
  padding: 34px;
  border-radius: 24px;
  background: #101a2d;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

.eyebrow {
  color: #8cffc1;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

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

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

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0;
}

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

nav a {
  border: 1px solid rgba(140, 255, 193, 0.28);
  border-radius: 999px;
  padding: 10px 14px;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 18px;
}

.result-note {
  margin-top: 14px;
  border: 1px solid rgba(140, 255, 193, 0.28);
  border-radius: 16px;
  padding: 12px 14px;
  background: rgba(140, 255, 193, 0.1);
}

.demo-highlight {
  outline: 3px solid rgba(140, 255, 193, 0.55);
  outline-offset: 4px;
}
</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.

<picture>
  <source srcset="mobile.webp">
  <source srcset="desktop.webp">
</picture>

<picture><img src="hero.jpg"></picture>
What this gives you

A recognizable mistake you can search for and refactor.

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 type="image/webp" source above the mobile source.
  • Rewrite the fallback img alt text.
  • Run the preview and explain which element carries the meaning.

Practice assignment

Do this before moving to the next lesson.

  1. Create a picture element with two source elements and one img fallback.
  2. Use one media condition for a mobile crop.
  3. Explain when picture is better than a simple img.

Try it yourself

Build a picture element with fallback

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.

  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?