Adding Images to Your Web Pages
Images can completely change how your website feels. A page with just text can look boring, but a page with images feels more alive, easier to understand, and more fun to read.
In this tutorial, you’ll learn how to:
- Add an image to a web page using HTML
- Control the image’s size
- Add alternative text for accessibility
- Add captions and align images with text
You don’t need any previous coding experience. We’ll go step by step, explain every piece, and give you short code examples you can copy and try.
What You Need Before You Start
You only need two things:
- A web browser (like Chrome, Firefox, Edge, or Safari)
- A text editor (like Notepad on Windows, TextEdit on Mac, or a free code editor like VS Code)
We’ll create a simple HTML file, save it on your computer, and open it in your browser to see the results.
Step 1: Create a Simple Web Page
First, let’s create a very basic web page to work with.
- Open your text editor.
- Create a new file.
- Copy and paste this code into the file:
<!-- Save this as index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My First Image Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is my first web page with an image!</p>
</body>
</html>
- Save the file as
index.htmlin a new folder on your computer. - Open that file in your browser (usually by double-clicking it).
You should see a simple page with a heading and a sentence. Next, we’ll add an image.
Step 2: Understanding the <img> Tag
To show an image on a web page, we use the <img> tag in HTML.
The basic form looks like this:
<img src="IMAGE_FILE" alt="DESCRIPTION" />
src(source): tells the browser where to find the image file.alt(alternative text): text that describes the image.- Shown if the image can’t load.
- Read aloud to people using screen readers.
The <img> tag is self-closing, which means it doesn’t need a separate </img> closing tag.
Step 3: Add Your First Image
Let’s add an image to the page.
3.1 Get an image file
- Find any image you like on your computer (for example,
cat.jpgormountain.png). - Copy your image file into the same folder as your
index.htmlfile.
3.2 Add the <img> tag
Open index.html in your text editor again, and change the <body> to look like this (replace your-image.jpg with your actual file name):
<body>
<h1>Welcome to My Web Page</h1>
<p>This is my first web page with an image!</p>
<!-- My first image -->
<img src="your-image.jpg" alt="A description of my image" />
</body>
Save the file, then refresh your browser.
You should now see your image below the text.
What each part does
<img ... />: tells the browser you want to display an image.src="your-image.jpg": points to your image file in the same folder.alt="A description of my image": a short sentence describing the image, like"A black cat sitting on a chair".
Try it yourself
Change the alt text to something different, save the file, then temporarily rename the image file so the browser can’t find it (for example, change your-image.jpg to your-image-2.jpg).
Refresh the page. You should now see the alt text where the image should be. This shows how the alt text works when an image is missing.
Step 4: Control the Image Size
Sometimes images are too big or too small. You can control their size with the width and height attributes.
Add this version of the image to your page:
<!-- Resize the image using width and height -->
<img
src="your-image.jpg"
alt="A description of my image"
width="300"
height="200"
/>
width="300"means the image is 300 pixels wide.height="200"means the image is 200 pixels tall.
If you only set width, the browser will automatically adjust the height to keep the image from looking stretched.
For example:
<!-- Only control the width, let the browser adjust height -->
<img
src="your-image.jpg"
alt="A description of my image"
width="300"
/>
Try different values like 150, 400, or 600 and refresh the page to see the changes.
Step 5: Add a Caption Under the Image
Sometimes you want to add a caption (a small sentence) under your image to explain what it is.
HTML has special tags for this: <figure> and <figcaption>.
Here’s how to use them:
<!-- Image with a caption -->
<figure>
<img
src="your-image.jpg"
alt="A description of my image"
width="300"
/>
<figcaption>My favorite photo from last summer.</figcaption>
</figure>
<figure>: groups the image and its caption together.<figcaption>: the text under the image.
When you refresh, you’ll see the image with the caption right below it.
Try it yourself
Change the caption text to something more personal, like:
"The day I learned how to add images to a web page."
You’ve just combined images and text in a meaningful way. That’s a big step in web design.
Step 6: Align Images with Text
You might want an image to sit next to some text instead of above or below it.
To do this, we’ll use a tiny bit of CSS (Cascading Style Sheets). CSS is a language that controls how things look on your page.
Add this inside your <body> tag:
<h2>My Hobby</h2>
<p>
<img
src="your-image.jpg"
alt="A description of my image"
width="150"
style="float: left; margin-right: 10px;"
/>
I love taking photos in my free time. This picture reminds me of a peaceful
afternoon spent exploring new places and practicing my photography skills.
</p>
What’s new here?
style="float: left; margin-right: 10px;"is inline CSS.float: left;moves the image to the left side.margin-right: 10px;adds space to the right so the text doesn’t touch the image.
Refresh your page. You should see the image on the left with text wrapped around it.
Try it yourself
- Change
float: left;tofloat: right;and see what happens. - Try different
margin-rightvalues like20pxor40px.
Experimenting like this is one of the best ways to learn.
Step 7: Using Images from the Web (Optional)
So far, you’ve used images stored on your own computer. You can also show images that are already on the internet.
Instead of a file name like your-image.jpg, you use a full URL, like this:
<img
src="https://example.com/images/sample-photo.jpg"
alt="A sample photo from the web"
width="300"
/>
A few tips:
- Make sure you have permission to use the image.
- If the image is removed from the website, it will also disappear from your page.
For learning and personal practice, this is fine, but for real projects, it’s better to store your own copies of images (and follow copyright rules).
Quick Recap
You’ve just learned a lot about adding images to your web pages. Here are the key points:
- Use the
<img>tag to display images. - The
srcattribute points to the image file (on your computer or on the web). - The
altattribute provides a text description, which is important for accessibility. - You can control image size using
widthandheight. - Use
<figure>and<figcaption>to add captions. - A little CSS (like
floatandmargin) helps position images next to text.
If you’ve followed along and seen your first image show up in the browser, that’s a real win. You’ve moved from a plain text page to a visual web page.
What’s Next?
Here are some ideas to keep going:
- Create a photo gallery page with 3–6 images in a row.
- Experiment with different image sizes and captions.
- Look up simple CSS tutorials to learn more about styling images (like borders and shadows).
Most important: keep trying small experiments. Every time you change the code and refresh the page, you’re learning how the web works, step by step.
