HTML Basics
HTML Images
Learn how to embed images in HTML pages, control their size, and write good alt text for accessibility.
HTML Images
Images can improve the design and appearance of a web page. The HTML <img> tag is used to embed an image in a web page. Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
Required Attributes
The <img> tag has two required attributes:
src— Specifies the path to the imagealt— Specifies an alternate text for the image
Image Size
You can use the style attribute to specify the width and height of an image. Alternatively, use the width and height attributes. Always specify the width and height to avoid layout shifts.
Responsive Images
Use CSS to make images responsive (scale with their container):
img { max-width: 100%; height: auto; }
The figure Element
Use <figure> and <figcaption> to add a caption to your images:
Example
<!DOCTYPE html>
<html lang="en">
<body>
<!-- Basic image -->
<img src="flower.jpg" alt="Red tulip flower in bloom" width="400" height="300">
<!-- Image as link -->
<a href="/tutorials">
<img src="logo.png" alt="DevForge Academy Logo" width="150" height="50">
</a>
<!-- Responsive image -->
<img src="hero.jpg" alt="Developer coding" style="max-width:100%; height:auto;">
<!-- Figure with caption -->
<figure>
<img src="chart.png" alt="Bar chart showing programming language popularity">
<figcaption>Figure 1: Most popular programming languages in 2025</figcaption>
</figure>
<!-- Multiple image formats (WebP with fallback) -->
<picture>
<source srcset="logo.webp" type="image/webp">
<img src="logo.png" alt="Logo" width="150" height="50">
</picture>
</body>
</html>