Navigation
Enhance your website by adding images and learning why accessibility is crucial for all users.
Imagine browsing the web with your eyes closed—how would you know what a 'stunning mountain sunset' looks like if the website didn't tell your computer how to describe it?
To add a picture to your website, we use the <img> tag. Unlike the paragraphs or headings you've learned, the image tag is an empty element, meaning it doesn't have a closing tag. Instead, it uses attributes to tell the browser what to do. The most important attribute is src (short for 'source'). This acts like a digital map, telling the browser exactly where to find the image file, whether it's on your computer or on the internet. For example: `<img src="robot.jpg">`. Without the source, your browser just sees an empty box!
1. Save an image named 'pizza.jpg' in the same folder as your HTML file. 2. Type the tag: `<img src="pizza.jpg">`. 3. Save and refresh your browser to see the delicious result.
Quick Check
What does the 'src' attribute stand for, and why is it necessary?
Answer
It stands for 'source' and it tells the browser the file path or URL of the image to display.
Not everyone views the web the same way. Some users have visual impairments and use screen readers—software that reads the content of a page out loud. This is where the alt (alternative text) attribute becomes a superpower. Alt text provides a written description of the image. If the image fails to load, the text appears in its place. Good alt text is descriptive but brief. Instead of saying `alt="dog"`, try `alt="A golden retriever puppy playing in the grass"`. This ensures your website is inclusive for everyone.
1. Identify the purpose of the image. 2. Write a clear description: `<img src="blue-car.png" alt="A shiny blue sports car parked on a city street">`. 3. Avoid starting with 'Image of...' because the screen reader already knows it is an image.
Quick Check
Why should you avoid using alt text like 'image123.jpg'?
Answer
It doesn't provide any useful information to a person using a screen reader about what the image actually contains.
Sometimes an image is too large for your layout. You can control the size using the width and height attributes. These values are usually measured in pixels (). However, you must be careful with the aspect ratio, which is the relationship between the width and the height. If the original image is pixels, the ratio is . If you change the width to but keep the height at , the image will look 'squished.' To keep it looking natural, only change one attribute, and the browser will calculate the other automatically to maintain the ratio.
Suppose you have an image that is pixels wide and pixels high. You want to shrink it so the width is pixels. 1. Find the ratio: . 2. Set the new width: . 3. Calculate the new height to keep the ratio: . 4. Final tag: `<img src="photo.jpg" width="400" height="300">`.
Which of the following is the correct way to write an image tag?
If an image has an original size of and you set the width to , what should the height be to maintain the aspect ratio?
Alt text is primarily used to make the code look more professional and has no impact on users.
Review Tomorrow
In 24 hours, try to explain to a friend why we use 'alt' text and what happens to an image if you change the width without considering the height.
Practice Activity
Find three different images online and write a perfect 'alt' attribute for each one, then try to display them on a practice HTML page at half their original size.