Learn HTML – Part 6 – Image Tag – Displaying Images in HTML

The HTML img tag is used to display images on a webpage. Images help make websites visually engaging and improve the overall user experience.

Unlike most HTML elements, the img tag is a self-closing tag, meaning it does not require a closing tag.

What is the Image Tag?

The img tag is used to embed images in an HTML document. It loads an image from a specified source and displays it on the webpage.

Images can come from:

• Your website folder
• Another website
• A CDN or image hosting service

Basic Syntax

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

Here:

• src specifies the image file location
• alt provides alternative text if the image cannot load

Example – Displaying an Image

<img src="https://wpdevelopertips.in/wp-content/uploads/2023/12/wpdevelopertips-logo-1.png" alt="Sample Image">

Output:

Important Attributes of img Tag

Setting Image Size

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

<img src="image.jpg" alt="Example Image" width="300" height="200">

In modern web development, image sizing is usually handled using CSS.

Why is the alt Attribute Important?

• Improves website accessibility
• Helps screen readers describe images
• Displays text if the image fails to load
• Helps search engines understand the image

Always include the alt attribute when using images in HTML.

Common Mistakes Beginners Make

• Forgetting the alt attribute
• Using very large image files
• Incorrect image file paths

Conclusion

The HTML img tag is used to display images on a webpage.

By using attributes like src, alt, width, and height, developers can control how images appear and improve accessibility.

What’s Next?

Now that you understand the img tag, the next step is learning about the br tag, which is used to create line breaks in HTML.

Next: Learn HTML – Part 7 – Line Break Tag – br Tag Explained →

Series: Learn HTML Series