HTMLmarkup~15 mins

Image source and alt attribute in HTML - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Image source and alt attribute

📖 Scenario: You are creating a simple webpage to display a picture of a cute puppy. This webpage will help visitors see the image and understand what it shows even if the image cannot load.

🎯 Goal: Build a basic HTML page that shows an image of a puppy using the correct src and alt attributes in the <img> tag.

📋 What You'll Learn

Use a valid HTML5 document structure with <!DOCTYPE html>, <html>, <head>, and <body> tags.

Add an <img> tag with the exact src attribute set to 'puppy.jpg'.

Add an alt attribute to the <img> tag with the text 'Cute puppy sitting on grass'.

Make sure the HTML is valid and the image displays correctly in a browser.

💡 Why This Matters

🌍 Real World

Websites use images to make content engaging and informative. Using the <code>alt</code> attribute helps people who use screen readers and improves SEO.

💼 Career

Knowing how to properly add images with descriptive alt text is a fundamental skill for web developers and content creators to build accessible and user-friendly websites.

Progress0 / 4 steps

Create the basic HTML structure

Write the basic HTML5 skeleton with <!DOCTYPE html>, <html lang="en">, <head> containing a <meta charset="UTF-8"> and <title>Puppy Image</title>, and an empty <body>.

HTML




    
    Puppy Image

Need a hint?

Start by typing the standard HTML5 document tags and set the language to English.

Add the image tag with source

Inside the <body>, add an <img> tag with the src attribute set exactly to "puppy.jpg".

HTML




    
    Puppy Image

Need a hint?

Use the <img> tag and set the src attribute to the image file name.

Add the alt attribute to the image

Modify the existing <img> tag to include an alt attribute with the exact text "Cute puppy sitting on grass".

HTML




    
    Puppy Image

Need a hint?

The alt attribute describes the image for screen readers and when the image cannot load.

Complete the HTML document

Ensure the HTML document is properly closed with the closing </body> and </html> tags and that the <img> tag includes both src and alt attributes as specified.

HTML




    
    Puppy Image

Need a hint?

Check that all tags are closed and the image tag has both required attributes.