0
0
SEO Fundamentalsknowledge~30 mins

Image alt text and optimization in SEO Fundamentals - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepVisualPracticeChallengeProjectRecallTime
Image alt text and optimization
šŸ“– Scenario: You are creating a simple webpage for a local bakery. The page will show pictures of three popular baked goods. To make the page accessible and optimized for search engines, you need to add descriptive alternative text to each image and ensure the images are properly sized.
šŸŽÆ Goal: Build a basic HTML page with three images of baked goods. Add clear and descriptive alt text to each image. Also, set the image width to 300 pixels to optimize loading and display.
šŸ“‹ What You'll Learn
Create an HTML skeleton with <!DOCTYPE html>, <html>, <head>, and <body> tags
Add three <img> tags with the exact src attributes provided
Add descriptive alt text for each image
Set the width attribute of each image to 300 pixels
šŸ’” Why This Matters
šŸŒ Real World
Adding alt text and optimizing images is essential for making websites accessible to users with disabilities and improving search engine rankings.
šŸ’¼ Career
Web developers and content creators must know how to write good alt text and optimize images to meet accessibility standards and enhance user experience.
Progress0 / 4 steps
1
Create the HTML skeleton and add image tags
Create a basic HTML page structure with <!DOCTYPE html>, <html lang="en">, <head> containing a <title> "Bakery Products", and an empty <body>. Inside the <body>, add three <img> tags with these exact src attributes: "bread.jpg", "cake.jpg", and "cookies.jpg". Do not add alt or width attributes yet.
SEO Fundamentals
Need a hint?

Start by writing the basic HTML page structure. Then add three <img> tags with the exact src values inside the <body>.

2
Add descriptive alt text to each image
Add an alt attribute to each <img> tag with these exact values: for bread.jpg use "Freshly baked bread loaf", for cake.jpg use "Chocolate layered cake", and for cookies.jpg use "Assorted chocolate chip cookies".
SEO Fundamentals
Need a hint?

Use the alt attribute inside each <img> tag with the exact descriptive text given.

3
Set the width of each image to 300 pixels
Add a width attribute with the value "300" to each <img> tag to set the image width to 300 pixels.
SEO Fundamentals
Need a hint?

Add the width="300" attribute inside each <img> tag to control the image size.

4
Add a descriptive <h1> heading and a footer
Add a main heading <h1> with the text "Welcome to Our Bakery" above the images inside the <body>. Then add a <footer> below the images with the text "Ā© 2024 Sweet Treats Bakery".
SEO Fundamentals
Need a hint?

Place the <h1> heading before the images and the <footer> after the images inside the <body>.