Embed images with img, alt text and sizes.
✍️ 3 exercises + code challenge in this lessonThe <img> element embeds an image. It is an empty element, so it has no end tag.
src: the path or URL of the image.alt: a text description, read by screen readers and shown if the image fails to load.Use width and height attributes (or CSS) to set the size. Setting them lets the browser reserve space and prevents the page from jumping while it loads.
Put an <img> inside an <a> to make the image clickable.
Mastering HTML Images helps you write clean and reliable HTML code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.
<img src="https://picsum.photos/id/1015/300/180" alt="River between mountains" width="300" height="180">
<p>An image that is a link:</p>
<a href="https://codesintech.com" target="_blank">
<img src="https://picsum.photos/id/1025/160/100" alt="A dog" width="160" height="100">
</a>
<p>A broken image shows its alt text:</p>
<img src="missing.jpg" alt="This image could not be found">Check what you learned in “HTML Images”.
Complete the image element.
<img ="logo.png" ="Company logo">
Why should every image have an alt attribute?
Add an image with src "https://picsum.photos/200", alt text "Random photo" and width 200.
Free sign-in required · Google login available
Stuck on something?
Ask the community in the CodesInTech forum.
Need a developer?
Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.
Explore Our Services