HTMLmarkup~30 mins

Image tag usage in HTML - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Image Tag Usage

📖 Scenario: You are creating a simple webpage for a local bakery. You want to show a picture of a delicious cake on the page to attract visitors.

🎯 Goal: Build a basic HTML page that displays an image of a cake using the <img> tag with proper attributes for accessibility and responsiveness.

📋 What You'll Learn

Use the <img> tag to display an image

Include the src attribute with the exact value cake.jpg

Add an alt attribute with the text Delicious chocolate cake

Set the image width to 300 pixels using the width attribute

Use semantic HTML structure with <main> and <header> tags

💡 Why This Matters

🌍 Real World

Images are essential on websites to show products, people, or places. Knowing how to add images properly helps make pages attractive and accessible.

💼 Career

Web developers must use the <code><img></code> tag correctly to ensure images load well, are accessible to screen readers, and look good on all devices.

Progress0 / 4 steps

Create the basic HTML structure

Write the basic HTML5 skeleton with lang="en" in the <html> tag, and include <head> with <meta charset="UTF-8"> and <title>Bakery</title>. Add an empty <body> tag.

HTML




    
    Bakery

Need a hint?

Start with the standard HTML5 document structure including language and character set.

Add semantic structure with header and main

Inside the <body>, add a <header> with a heading <h1>Welcome to Our Bakery</h1> and a <main> section below it.

HTML




    
    Bakery

Need a hint?

Use semantic tags to organize the page content clearly.

Insert the image tag inside main

Inside the <main> tag, add an <img> tag with src="cake.jpg", alt="Delicious chocolate cake", and width="300" attributes.

HTML




    
    Bakery


    
        Welcome to Our Bakery

Need a hint?

The <img> tag needs src, alt, and width attributes exactly as specified.

Add responsive style for the image

Add a <style> block inside the <head> that sets img to have max-width: 100% and height: auto for responsiveness.

HTML




    
    Bakery
    


    
        Welcome to Our Bakery

Need a hint?

Use CSS inside a <style> tag to make the image scale nicely on smaller screens.