The design and user experience of websites is very important in today's world. If you are building a website, then using images is a must. In this article, we will talk about HTML IMG tags, which are used to display images on your webpages. We will see what the IMG tag is, how it is used, and also learn about its important properties. It will also tell you how the IMG tag helps in SEO (Search Engine Optimization).
 |
| HTML-Tutorial |
What is IMG tag?
The HTML IMG tag is a special tag used to display images on webpages. The IMG tag has no closing tag, i.e. it is self-closing. This tag is used to embed any image in a web page.
Syntax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Webpage</title>
</head>
<body>
<header>
<h1>Welcome to My Webpage</h1>
</header>
<main>
<p>This is the main content area.</p>
<img src="image.jpg" alt="Sample" />
</main>
<footer>
<p>Footer Content</p>
</footer>
</body>
</html>
- The src attribute defines the path to the image.
- The alt attribute gives a description of the image, which will be displayed if the image fails to load, and is also required for screen readers.
Why and how is the img tag used?
Images help to understand the content on websites and add visual appeal. The IMG tag is used so that you can easily include images in your webpage. When you write HTML code and want to show an image, you use the IMG tag.
How to use?
- You first need the URL or file path of the image.
- Then you put the path of the image in the src attribute in the img tag.
- The alt attribute is used to write a description of the image so that people can understand if the image is not visible.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Webpage</title>
</head>
<body>
<header>
<h1>Welcome to My Webpage</h1>
</header>
<main>
<p>This is the main content area.</p>
<img src="nature.jpg" alt="A beautiful nature landscape">
</main>
<footer>
<p>Footer Content</p>
</footer>
</body>
</html>
Important Attribute of the <img> Tag:
There are many attributes in the IMG tag of HTML which have their own different functions.
1. SRC (Source):
This attribute is the most important attribute. In this attribute, we are given the URL of the image, the image is shown due to this URL.
<img src="images/logo.png">
2. ALT (Alternative Text):
If the image is not loaded due to any reason, then this text appears on the screen. It is also used for visually impaired people, where the screen reader can read the text.
<img src="photo.jpg" alt="Mera Photo">
3. Width and Height:
With the help of this attribute, the size of the image can be changed.
<img src="logo.png" width="200" height="100">
4. Title:
When the user moves the mouse over the image, a small tooltip appears.
<img src="image.jpg" title="Yeh meri photo hai">
5. Loading:
It is used for performance. Lazy value By giving lazy value, the image is loaded only when the user scrolls to it.
<img src="pic.jpg" loading="lazy">
2 Examples with Anchor Tag
Anchor tag (<a>) is used to give a link. If we have clicked on the image and sent to another page, then we can put the image inside the anchor tag.
Example 1:
<a href="https://www.google.com">
<img src="google-logo.png" alt="Google">
</a>
Click on this image will open Google's website.
Example 2:
<a href="about.html">
<img src="me.jpg" alt="About Me">
</a>
The user will go to the "About Me" page to click on the image.
How does <img> tag help in SEO?
SEO means Search Engine Optimization. This is proces whose website comes up in search engine like Google. <img> tag also helps in SEO:
- Alt Text: Search engines cannot see the image, but can understand the alt text. If you have given relevant alt text of your image, then your image can appear in Google Images.
- Image Optimization: If you keep the image size right and use loading="lazy", then your web page loads fast. Google puts fast websites higher in ranking.
- Titles and captions: These enhance user experience, which impacts rankings.
If you use images correctly, your site's SEO performance improves.
Conclusion
In this article, we have understood everything about the <img> tag of HTML in detail. You learned what this tag is, how it is used, what are its important properties, how to combine images with anchor tags, and how it helps in SEO.
If you are a beginner then the <img> tag is a basic but very powerful tool for you. By using it correctly, you can make your website beautiful, user-friendly, and SEO-friendly.