Images make a webpage more engaging and visually appealing. HTML allows you to display images using the
<img>tag, which is an empty tag (it doesn’t have a closing tag). You can insert photos, illustrations, icons, and other graphics directly into your webpage.
The <img> Tag
The basic syntax for adding an image is:
<img src="image.jpg" alt="Description of the image">Explanation:
src(source): Specifies the path or URL of the image.alt(alternative text): Provides descriptive text if the image cannot be displayed. It also helps with accessibility and SEO.
Adding Image Width and Height
You can control the display size of an image using the width and height attributes:
<img src="image.jpg" alt="A sample image" width="300" height="200">⚠️ Tip: It’s better to control image size with CSS for responsive design.
Image from a Folder
If your image is stored in a subfolder, specify the relative path:
<img src="images/picture.jpg" alt="Picture inside folder">If the image is hosted online, you can use an absolute URL:
<img src="https://example.com/photo.jpg" alt="Online image">Image as a Link
You can make an image clickable by placing it inside an <a> tag:
<a href="https://html5andcss3.org">
<img src="https://html5andcss3.org/wp-content/uploads/2025/10/html5_and_css3_logo.webp" alt="HTML5 & CSS3 Logo" width="150">
</a>Image Title Attribute
The title attribute adds a tooltip text when users hover over the image:
<img src="flower.jpg" alt="Rose" title="A beautiful rose">Responsive Images with CSS
To make your images adjust automatically on different screen sizes, use CSS:
<img src="mountain.jpg" alt="Mountain view" style="width:100%; height:auto;">This ensures the image scales correctly across all devices.
Image Alignment (Modern Way)
In older HTML, people used align attribute (now deprecated).
The modern and better way is to use CSS:
<img src="https://html5andcss3.org/wp-content/uploads/2025/10/html5_and_css3_logo.webp" alt="Photo" style="display:block; margin:auto;">This centers the image horizontally.
Alternative Text Importance (Alt Tag)
The alt attribute is crucial for:
- SEO optimization
- Screen readers for visually impaired users
- Displaying fallback text when the image is missing
Always use descriptive alt text relevant to the image content.
Example: Complete Image Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Image Example</title>
</head>
<body>
<h2>Example of an Image in HTML</h2>
<a href="https://html5andcss3.org">
<img src="https://html5andcss3.org/wp-content/uploads/2025/10/html5_and_css3_logo.webp" alt="HTML5 Logo" width="200" style="display:block; margin:auto;">
</a>
<p>This is an example of how to add and center an image in HTML.</p>
</body>
</html>Best Practices
- Use
<img>tag withsrcandaltattributes. - Use
width,height, and CSS for responsive styling. - Wrap images in
<a>tags for clickable images. - Always include descriptive
alttext for accessibility.
Conclusion
Images are an essential part of modern web design. They help communicate ideas, showcase products, and enhance the visual appeal of your website. In HTML, the <img> tag is simple yet powerful — allowing you to insert, resize, and link images effortlessly.
By combining proper attributes (src, alt, width, height) and modern CSS styling, you can create responsive, accessible, and fast-loading visuals that improve both user experience and SEO performance.
