Web Development - HTML Images
HTML Images
Images make your web pages more visual and engaging.
In HTML, images are inserted with the <img> element.
Important: The <img> element is an empty element - it has no closing tag.
Basic Image
Use the src attribute to specify the image path and the alt attribute to describe the image.
The alt text is shown if the image cannot load, and it helps screen readers describe the image.
Width and Height
You can set the size of an image with the width and height attributes (in pixels).
Example
Fixed size:
<img src="img_mountains.jpg" alt="Mountains" width="500" height="333">
Try it Yourself »
Tip: For responsive layouts, it is often better to control size with CSS instead of fixed width and height attributes.
Responsive Images
Make images scale with the screen by using CSS.
Setting max-width: 100% and height: auto keeps the image inside its container.
Example
Responsive image with inline CSS:
<img src="img_city.jpg" alt="City skyline" style="max-width:100%; height:auto;">
Try it Yourself »
Image Paths
Use a relative path for images inside your project folder, or an absolute URL for images hosted elsewhere.
Example
Relative and absolute paths:
<!-- Relative path (image in images/ folder) -->
<img src="/images/logo.png" alt="Site logo">
<!-- Absolute URL -->
<img src="https://example.com/banner.jpg" alt="Banner">
Try it Yourself »
Tip: Keep your images in a folder like
/images/ to stay organized.
Alt Text Best Practices
Write alt text that describes the image"s meaning, not just its file name.
If the image is decorative, you can use an empty alt: alt="".
Example
Good vs poor alt text:
<!-- Good: describes the content -->
<img src="team.jpg" alt="Our team standing outside the office">
<!-- Poor: not descriptive -->
<img src="team.jpg" alt="image">
Try it Yourself »
Title Attribute (Tooltip)
Add a short tooltip with the title attribute.
This is optional and appears when the user hovers the image.
Example
Image with a tooltip:
<img src="img_forest.jpg" alt="Forest trees" title="Beautiful green forest" width="400">
Try it Yourself »
Image as a Link
Wrap an image with an <a> element to make it clickable.
Example
Clickable image:
<a href="https://www.w3schools.com" target="_blank">
<img src="images/w3schools.png" alt="W3Schools" width="160">
</a>
Try it Yourself »
Figure and Caption
Use <figure> and <figcaption> to group an image with a caption.
Example
Image with caption:
<figure>
<img src="img_snow.jpg" alt="Snowy mountain" width="420">
<figcaption>A snowy mountain at sunrise</figcaption>
</figure>
Try it Yourself »
Common Mistakes
- Forgetting
alttext. - Pointing
srcto the wrong path. - Using very large images without resizing or compression.
Tip: Use compressed images (JPEG, PNG, WebP) and sensible dimensions to keep pages fast.
Summary
- Insert images with
<img src="..." alt="...">. - Set size with attributes or CSS - CSS is better for responsive design.
- Use meaningful
alttext for accessibility. - Make images responsive with
max-width:100%; height:auto;. - Wrap images in links to make them clickable.
Next, you will learn about HTML Lists - creating bullet lists and numbered lists to structure information.
