Images and Alt Text
Add visuals to your page with the image <img> tag and write descriptive alt attributes.
Learning Goals
The Core Concept
Images make your website engaging and easy to read. In HTML, the `<img>` tag displays pictures. Unlike other tags, `<img>` is self-closing—it does not need an ending `</img>` tag. It requires two key attributes: `src` (source, which is the path to your image file) and `alt` (alternative text, which describes the image for screen readers and search engines).
Visual guide
Html concept flow
A simple original diagram to connect the lesson idea with real project flow.
Code & Implementation
<img src="https://techidea.online/logo.png" alt="TechIdea logo showing a light bulb icon" width="200" height="50">Expected Output
[Displays the TechIdea logo image with a width of 200px and height of 50px]
Embed a Developer Profile Photo
Hands-on practice task
The Challenge
Write an image tag that embeds a photo named profile.webp located in an images folder. Include an alt text describing it as 'Developer smiling profile photo', and set its display width to 150 pixels.
Helpful Hints
- •Set the src to images/profile.webp.
- •Set the width attribute directly to '150'.
Quick Knowledge Check
Why is my image showing a broken icon?
What is the purpose of the alt attribute?
Continue Learning
Next steps after this lesson
Write an image tag that embeds a photo named profile.webp located in an images folder. Include an alt text describing it as 'Developer smiling profile photo', and set its display width to 150 pixels.
Ready to put your coding skills to the test?
Don't just read—write code! Use our free Try-Code Playground to experiment with real-time preview, or search utilities on our Developer Tools List.