FSM Full Stack Masterclass
Platform under construction
HTML course badge

HTML Attributes

Intermediate

HTML Image and Media Attributes

Learn src, alt, srcset, sizes, loading, width, height as part of the HTML attribute system: what they configure, where they belong and which mistakes to avoid.

Media

Media attributes decide what loads, what users understand and how fast a page feels.

Images, video and audio depend heavily on attributes. The browser needs src to find the file, alt to describe images when they cannot be seen, and dimensions or loading hints to improve layout stability and performance.

A professional image tag is not only about showing a picture. It is about accessibility, speed, responsive layout and graceful failure.

Attribute group: src, alt, srcset, sizes, loading, width, height. Attributes for images, video, audio and responsive media loading.

What belongs here

Learn attributes by purpose, not by memorizing random names.

src

The media file to load.

alt

Text alternative for meaningful images.

srcset + sizes

Responsive image candidates and layout hints.

loading

Hints lazy or eager loading behavior.

width + height

Reserve space and reduce layout shift.

controls

Shows browser controls on audio and video.

Syntax in context

Image attributes should describe both file and meaning.

Use src for the file, alt for the meaning, and width/height for layout stability.

<img
  src="lesson-dashboard.webp"
  alt="Student dashboard showing HTML lesson progress"
  width="960"
  height="540"
  loading="lazy"
>

Good versus weak

Small attribute choices can change behavior, accessibility and security.

Good

<img
  src="lesson-dashboard.webp"
  alt="Student dashboard showing HTML lesson progress"
  width="960"
  height="540"
  loading="lazy"
>

Weak

<img src="image1.jpg" alt="image">
<img src="huge-photo.jpg">

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.

<img
  src="lesson-dashboard.webp"
  alt="Student dashboard showing HTML lesson progress"
  width="960"
  height="540"
  loading="lazy"
>
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="label">Media</p>
  <h1>Meaningful image markup</h1>
  <img src="https://placehold.co/640x360/0b1220/8cffc1?text=HTML+Lesson" alt="HTML lesson preview card" width="640" height="360" loading="lazy">
</main>

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

.demo-card {
  width: min(760px, calc(100vw - 48px));
  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);
}

.content-panel {
  margin-top: 18px;
  border-radius: 18px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.06);
}

.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; font-weight: 800; }
img, iframe, video, svg { max-width: 100%; border-radius: 18px; }
iframe { width: 100%; min-height: 180px; border: 1px solid rgba(255,255,255,0.16); }

label { display: block; margin-top: 14px; color: #d6deec; font-weight: 800; }
input, button {
  display: block;
  width: 100%;
  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;
}

button:disabled { opacity: 0.56; cursor: not-allowed; }
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid rgba(255, 255, 255, 0.16); padding: 12px 14px; }
</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.

<img src="image1.jpg" alt="image">
<img src="huge-photo.jpg">
What this gives you

A recognizable mistake you can search for and refactor.

Rules that matter

Use these rules before publishing real HTML.

Write useful alt text

Describe the meaning of the image, not the file name.

Use empty alt for decoration

Decorative images can use alt="" so they are skipped by assistive technology.

Reserve space

Width and height help the browser avoid layout jumping.

Lazy load with care

Lazy loading is useful below the fold, but important hero images may need eager loading.

Production thinking

Attributes are tiny pieces of HTML with real product impact.

Why does this matter?

Media attributes matter because an image tag has two jobs: load the file and explain the meaning. Src handles the file. Alt, width, height and loading help users, browsers and performance tools understand the image properly.

Accessibility

Alt text is the content substitute when a user cannot see an image. Bad alt text can hide important information.

Production note

Media attributes affect Core Web Vitals, bandwidth, accessibility and the perceived quality of the site.

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 from a lesson preview to "A cat".
  • Remove the width and height once, run the preview and think about why reserved space matters.

Practice assignment

Do this before moving to the next lesson.

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

Try it yourself

Image attributes that tell a complete story

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?