Lesson 5 — Fundamentals

Images and Media

HTML embeds images, audio, and video directly into a page using dedicated elements, each with attributes controlling their source, size, and accessibility.

The img Element

The <img> tag is self-closing and requires a src (source path) and an alt attribute describing the image for screen readers and for cases where the image fails to load.

HTML — Images 
<img src="images/logo.png" alt="Company logo" width="200" height="80">

<figure>
  <img src="images/team.jpg" alt="Our team at the 2025 conference">
  <figcaption>The team at our 2025 conference.</figcaption>
</figure>

Why alt Text Matters

The alt attribute isn't optional decoration — screen readers announce it to users who can't see the image, and search engines use it to understand image content. If an image is purely decorative, use alt="" (empty, not omitted) so assistive technology skips it silently.

Common Mistakes

  • Omitting the alt attribute entirely, leaving screen reader users with no description of the image.
  • Writing unhelpful alt text like "image1.jpg" instead of a meaningful description of the image's content or purpose.
  • Forgetting width and height attributes, which can cause the page layout to jump as images load.
  • Using an image of text instead of real HTML text, which hurts accessibility, SEO, and lets text become blurry or unselectable.

Professional Tip

Set explicit width and height attributes on every image, even if you also size it with CSS. The browser uses these to reserve the correct space before the image finishes loading, preventing content from jumping around (a key web performance metric).

Your Turn

Add an image to a page with proper alt text describing it, wrapped in a figure element with a figcaption explaining the image's context.

Mini Quiz

What is the purpose of the alt attribute on an img tag?