What Is the <img> Tag?

The <img> tag in HTML is used to embed images into a web page. Unlike other HTML elements, <img> is a self-closing tag, meaning it does not require a closing tag. This tag allows you to display images from your local files or external sources.

Syntax of the <img> Tag

The basic syntax for the <img> tag is as follows:

<img src="imageURL" alt="description" />

• <img>: The image tag used to embed images.
• src="imageURL": The src attribute specifies the path to the image you want to display. The src attribute is mandatory and tells the browser where to find the image.
• alt="description": The alt attribute provides alternative text for the image if it cannot be displayed. The alt attribute is optional.
• / >: Indicates that the tag is self-closing.

Examples of the <img> Tag

Let's explore some practical examples of using the <img> tag to embed images into your web pages. Each example includes the syntax, an explanation, and a complete HTML code snippet.

1. Embedding an External Image

Embedding an image from an external URL is straightforward. This method is useful when you want to display images hosted on other websites.

Explanation:

• The <img> tag embeds the TechGrind.io logo from the specified URL.
• The alt attribute provides a description of the image, enhancing accessibility.

2. Embedding a Local Image File

You can also embed images stored locally on your computer or within your project directory. Ensure that the path to the image is correct relative to your HTML file.

Explanation:

• The <img> tag displays a photo located in the images folder relative to the HTML file.
• Ensure that the photo.jpg file exists in the specified directory to avoid broken images.

In the next lesson, we will learn to set the dimensions of image using the width and height attributes.