{}
Learn web design and development
Free interactive courses
← Back to HTML
10

Images: `src`, `alt` and Responsive Basics

Use images with useful alternative text, simple responsive behavior and an early understanding of `picture` so your pages become clearer, more accessible and less fragile.

How much do you know about HTML?

📘 Theory

What `alt` Is Really For

Alternative text should describe the information or function the image contributes.

1

A good `alt` text is not the file name and not random filler. It explains what the user would miss without seeing the image.

2

If the image is purely decorative and adds no information, an empty `alt=""` can be the right choice.

Simple Responsive Habits

Images should adapt to the layout instead of breaking it.

  • Use `max-width: 100%` in CSS so large images do not overflow smaller screens.
  • Use `figure` and `figcaption` when the image benefits from a caption.
  • Use `picture` when the image source itself should change across device conditions.

🧪 Learn by doing

Example Guided Example: A Small Figure with Caption Combine `img`, `alt`, `figure` and `figcaption` in one simple pattern.
⌄

🏁 Challenges

Challenge Challenge: Write a Useful Alt Text Replace an empty alt value with a short helpful description.
⌄

🧰 Resources

Useful links

MDN: <img> MDN: <picture> web.dev: Learn HTML - Images
Test

Check your knowledge with a test about HTML.

Test for HTML
Course resources 27
📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards 🧩 Snippets
‹
Lesson 09
Semantic HTML: Structure with Meaning
Lesson 11
Basic HTML Forms: `label`, `input` and Native Validation
›

What is this?

I'm Cristian Eslava and I sometimes build websites so both you and I can learn and experiment. culTest

I made this in February 2026 to make learning easier for my students. The idea is to learn web development by practicing and to keep expanding the project with new topics, tests and challenges.

It draws inspiration from MDN, W3Schools, CodePen, Manz and many other web development references. I wanted to combine useful theory, runnable examples, challenges and the testing system I had already built for culTest. culTest

If you liked it, if you didn't, or if you want to get in touch, write to me at cristianeslava@gmail.com