Computer Science
Grade 6
20 min
Adding Images to Your Webpage: The `<img>` Tag
Learn to embed images into your webpage using the `<img>` tag and image sources.
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Explain the purpose of the `<img>` tag in HTML.
Write the correct HTML code to display an image on a webpage.
Use the `src` attribute to link to an image file.
Use the `alt` attribute to provide alternative text for an image.
Use the `width` and `height` attributes to change the size of an image.
Identify the difference between a local image file path and an online image URL.
Have you ever wondered how your favorite websites show pictures of funny cats or cool video game characters? 🖼️ Let's learn the secret code to make our own webpages more colorful and fun!
In this lesson, you will learn how to use a special HTML tag called the `<img>` tag. This tag lets you add pictures to your projects, making them look amazing. We will learn how to...
2
Key Concepts & Vocabulary
TermDefinitionExample
<img> TagA special HTML instruction that tells the browser to display an image on the page. It's a self-closing tag, meaning it doesn't need a separate closing tag like </p>.<img>
AttributeExtra information you add inside an HTML tag to change how it works or what it does. Attributes are made of a name and a value, like name="value".In `<img src="dog.jpg">`, `src` is the attribute name and `"dog.jpg"` is the attribute value.
src AttributeThe 'source' attribute. It tells the `<img>` tag the location or file name of the picture you want to show. This is the most important attribute for an image.src="images/robot.png"
alt AttributeThe 'alternative text' attribute. It prov...
3
Core Syntax & Patterns
Basic Image Tag Syntax
<img src="file_name.extension" alt="description of image">
This is the fundamental structure for adding an image. You must always include the `src` (source) attribute to tell the browser which image to load and the `alt` (alternative text) attribute for accessibility.
Image Sizing Attributes
<img src="..." alt="..." width="100" height="150">
Use the `width` and `height` attributes to control the size of your image. The values are numbers that represent pixels (tiny dots on your screen).
Linking to Online Images
<img src="https://www.example.com/images/photo.jpg" alt="...">
Instead of a local file name, you can use a full web address (URL) in the `s...
4 more steps in this tutorial
Sign up free to access the complete tutorial with worked examples and practice.
Sign Up Free to ContinueSample Practice Questions
Challenging
For a pet adoption website, which of the following is the BEST `alt` text for a picture of a small, brown, fluffy cat napping in a sunbeam?
A.alt="image"
B.alt="A small, brown, fluffy cat sleeping in a sunbeam"
C.alt="cat.png"
D.alt="This is a picture of a cat that you can adopt from our store. It is brown and fluffy and it is sleeping. Click here for more details."
Challenging
A very large, high-resolution photo (`mountains.jpg`, 10MB file size) is added to a page with `<img src="mountains.jpg" width="150">`. The page loads very slowly. Why?
A.The browser has to download the full 10MB file, even though it displays it smaller
B.The `width` attribute is too small for a large file
C.The `alt` text is missing, which slows down loading
D.JPG files are always slow to load
Challenging
How can you make an image of a button also work as a clickable link to `https://example.com`?
A.<img src="button.png" href="https://example.com">
B.<link href="https://example.com"><img src="button.png"></link>
C.<img src="button.png" link="https://example.com">
D.<a href="https://example.com"><img src="button.png" alt="Clickable button"></a>
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing Free