HTML Tutorial
HTML Images
Images make web pages more attractive and meaningful. In HTML, the <img> tag is used to display an image.
Syntax
<img src="image.jpg" alt="Description of image">
Attributes
| Attribute | Description |
|---|---|
src |
Specifies the image file path (URL or local) |
alt |
Provides alternative text if the image fails to load |
width / height |
Defines the image size in pixels or percentage |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Image Example</title>
</head>
<body>
<h2>HTML Image Example</h2>
<img src="nature.jpg" alt="Beautiful Nature" width="300" height="200">
</body>
</html>
Output
HTML Image Example
Adding an Image from a URL
You can also display images hosted on other websites.
<img src="https://www.example.com/images/mountain.jpg" alt="Mountain View">
Setting Image Size
You can set image size using the width and height attributes or with CSS.
Using HTML attributes
<img src="user.jpg" width="200" height="150">
Output
Image as a Link
You can turn an image into a clickable link.
<a href="https://learn2kode.com">
<img src="logo.png" alt="Learn2Kode Logo" width="150">
</a>
Output
Image Alignment (Using CSS)
<img src="tree.jpg" alt="Tree" style="float:right; width:150px;">
<p>This text will wrap around the image.</p>
Image with Caption
<figure>
<img src="user.jpg" alt="Sunset" width="300">
<figcaption>Beautiful Sunset View</figcaption>
</figure>
Output