Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Describe the purpose of using alt attribute in <img> tag in HTML
Our website pages heavily depend on images. They enhance the visual appeal of our web pages, better explain concepts, and do many other things. To include an image into the web page, we utilize the HTML <img> tag. The two required attributes of the <img> tag: src, which specifies the path to the picture, and alt, which specifies an alternative text for the image. The alt attribute is present in case the image isn't displayed for whatever reason.
Although the alt attribute for the <img> tag is present, many users choose to leave it blank or to fill it with text that has no relation to the picture. Let’s dive into the article to learn more about the importance of the alt attribute in <img> tag.
HMTL alt attribute
An alt attribute is referred as an alternative or alt text. It is a short, description that accurately describes an image.
This text is not displayed when you visit a web page in a browser. However, if for some reason you are unable to view an image, the alt text becomes apparent. This text needs to be detailed and comprehensive enough to offer the user or reader a feel of what the image needs to convey.
Syntax
Following is the syntax for HTML alt attribute
<img alt="text">
Importance of using alt attribute
Let’s look at the importance of the alt attribute in the <img> tag in HTML.
Your image might not load to your webpage if there are problems with connectivity or if the path is wrongly stated. In this instance, the alt text value is displayed in place of the picture.
The descriptive meaning of an image is provided in the alt text, which search engines can employ to boost the SEO of your website. Having appropriate alt text will help your web page rank higher because it gives search engines better data to rank your website with.
The image is described audibly for screen reader users who are visually handicapped. This demonstrates the value of improving accessibility for those who are blind or visually impaired.
When an image fails to load, the alt text is utilized as the anchor text to link it to another page or document.
Example
Let’s look at the following example, where we are going to use the alt attribute in the <img> tag in HTML.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: #DE3163;
}
h2 {
color: #DE3163;
}
body {
text-align: center;
background-color: #D5F5E3;
font-family: verdana;
}
</style>
</head>
<body>
<h1>TutorialsPoint</h1>
<h2>The Best E-Way Learning.!</h2>
<img src="https://www.tutorialspoint.com/cg/images/logo.png" alt="Tutorialspoint logo">
</body>
</html>
When we run the above code, it will generate an output consisting of the text displayed on the webpage along with the alt text displayed because the path we mentioned for the image is incorrect.
7 Views
