Date First Published: 24th August 2022
Topic: Web Design & Development
Subtopic: Web Development
Article Type: Computer Terms & Definitions
Difficulty: MediumDifficulty Level: 6/10
Learn more about what the alt attribute is in this article.
Short for the alternative attribute, the alt attribute is a HTML element used to specify the alternative text that will display when an image fails to load, due to an invalid file path, slow internet connection, or a removed or renamed image file. The alt attributes often include text that describes the image and can be seen in the HTML source code. The alt attribute was introduced in the HTML 1.2 draft to support text-based browsers and in HTML 4.01, it was required for the img and area tags.
The alt attribute is often incorrectly referred to as the 'alt tag'. It is incorrect to call it the 'alt tag' as it is not an actual HTML tag, such as <p>. It's an attribute that appears within the img and area tags. More information about examples of the alt attribute can be seen below.
The main reason why the alt attribute is used is for web accessibility reasons. Some users who browse the web have visual impairments and are unable to visually identify an image. Alt attributes can be read out by screen readers so that they can understand what the image is about. In addition, users who choose to block images, usually due to low or expensive bandwidth will still be able to understand information about the image.
The alt text is also available to technologies that are unable to see images, such as search engine bots. It will provide image descriptions to them, helping them to properly index an image. Search engines can crawl and rank images better when they have the alt attribute, which is good for image SEO. Whilst search engine recognition technology has improved over the years, search engines cannot see and interpret images as people do, so it's not recommended to leave them to interpret images on their own.
In this example below, the image of strawberries will display the specified alt attribute when it fails to load. See below how the alt text displays in your web browser.
Three examples of good and bad alt text can be seen below:
Bad alt text:
Okay alt text:
Better alt text:
Best alt text:
Bad alt text:
Okay alt text:
Better alt text:
Best alt text:
Bad alt text:
Okay alt text:
Better alt text:
Best alt text:
If so, it is important that you tell me as soon as possible on this page.
Network Services Network Setups Network Standards Network Hardware Network Identifiers Network Software Internet Protocols Internet Organisations Data Transmission Technologies Web Development Web Design Web Advertising Web Applications Web Organisations Web Technologies Web Services SEO Threats To Systems, Data & Information Security Mechanisms & Technologies Computer Hardware Computer Software Ethics & Sustainability Legislation & User Data Protection