0
0
HTMLmarkup~30 mins

Alt text for images in HTML - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Adding Alt Text to Images for Accessibility
📖 Scenario: You are creating a simple webpage for a local bakery. The page will show pictures of their best-selling cakes. To make sure everyone can understand the images, including people who use screen readers, you need to add descriptive alternative text to each image.
🎯 Goal: Build a basic HTML page with three images of cakes. Add meaningful alt text to each image so that people who cannot see the pictures can still know what they show.
📋 What You'll Learn
Create an HTML5 page with a <main> section
Add three <img> tags inside the <main> section
Use the exact image file names: chocolate-cake.jpg, vanilla-cupcake.jpg, strawberry-tart.jpg
Add descriptive alt attributes to each <img> tag
Use semantic HTML and include a <header> with a page title
💡 Why This Matters
🌍 Real World
Adding alt text to images is essential for making websites accessible to people who use screen readers or have slow internet connections where images might not load.
💼 Career
Web developers must ensure their websites meet accessibility standards, which includes providing meaningful alt text for images to improve usability for all users.
Progress0 / 4 steps
1
Create the basic HTML structure with a header and main section
Write the HTML5 skeleton with <!DOCTYPE html>, <html lang="en">, <head> including <meta charset="UTF-8"> and <meta name="viewport" content="width=device-width, initial-scale=1.0">. Add a <title> with the text Bakery Cakes. Inside the <body>, add a <header> with an <h1> that says Our Best Cakes and an empty <main> section below it.
HTML
Need a hint?

Start by typing the basic HTML page structure. Remember to include the lang attribute on the <html> tag and the viewport meta tag for mobile devices.

2
Add three images inside the main section without alt text
Inside the existing <main> section, add three <img> tags with the exact src attributes: "chocolate-cake.jpg", "vanilla-cupcake.jpg", and "strawberry-tart.jpg". Do not add any alt attributes yet.
HTML
Need a hint?

Type three <img> tags inside the <main> section. Use the exact file names for the src attributes. Don't add alt text yet.

3
Add descriptive alt text to each image
Add an alt attribute to each <img> tag with these exact texts: for chocolate-cake.jpg use "Chocolate cake with frosting and cherries", for vanilla-cupcake.jpg use "Vanilla cupcake with sprinkles", and for strawberry-tart.jpg use "Strawberry tart with fresh berries".
HTML
Need a hint?

Write the alt attribute inside each <img> tag exactly as shown. This helps screen readers describe the images.

4
Add a footer with contact information
Add a <footer> section below the <main> section. Inside the footer, add a paragraph <p> with the text Contact us at info@localbakery.com.
HTML
Need a hint?

Place the footer after the main section but still inside the body. Use a paragraph tag for the contact text.