HTML Images (`<img>` Tag): A Complete Guide

Introduction

Images make a website more attractive and engaging. In HTML, images are added using the <img> tag. Whether you're building a portfolio, blog, or business website, knowing how to display images is an essential skill.

In this article, you'll learn how to use the <img> tag, its important attributes, and best practices with simple examples.

What is the <img> Tag?

The <img> tag is used to display an image on a webpage.

Example:

<img src="image.jpg" alt="Sample Image">

Syntax

<img src="image.jpg" alt="Description">

• src specifies the image path.
• alt provides alternative text if the image cannot load.

Displaying an Image

<img src="nature.jpg" alt="Beautiful Nature">

This will display the image named nature.jpg.

Setting Image Width and Height

<img src="nature.jpg" alt="Nature" width="300" height="200">

You can control the image size using the width and height attributes.

Why is the alt Attribute Important?

<img src="logo.png" alt="Company Logo">

The alt text:

• Improves accessibility
• Helps search engines understand the image
• Appears if the image fails to load

Images from an Online URL

<img src="https://example.com/image.jpg" alt="Online Image">

You can also display images hosted on another server.

Best Practices

• Always provide an alt attribute.
• Use optimized images for faster loading.
• Keep image names meaningful.
• Avoid uploading unnecessarily large files.

Conclusion

The <img> tag is one of the most frequently used HTML elements. Learning how to use images correctly helps you create visually appealing and professional websites.

Frequently Asked Questions (FAQs)

1. Which tag is used to add images in HTML?

The <img> tag.

2. Is the <img> tag a closing tag?

No. It is a self-closing (void) element.

3. What does the src attribute do?

It specifies the location of the image.

4. Why should we use alt text?

It improves accessibility and helps if the image cannot be displayed.