What is the Alt Tag in HTML

ALT attributes

definition

ALT attributes are part of the HTML standard. They can be used to specify alternative texts for images that are integrated into websites. They play an important role in search engine optimization (SEO) and in barrier-free, handicapped-accessible websites.

The meaning and purpose of the alternative text

Illustration: ALT Attribute - Author: Seobility - License: CC BY-SA 4.0

Images and graphics are important elements in web design. They often convey complex relationships better than written descriptions, summarize what has been written clearly and loosen up the page. Background images, logos and banners as well as frames and other decorative graphics are indispensable for the visual aesthetics. Many images are also independent content in which website visitors are directly interested - for example photos on Instagram or in an online gallery.

However, not all Internet users are able to capture purely visual content, and even search engines have only just begun to understand graphic content. ALT attributes solve this problem by providing a textual alternative to the image. Web browsers and other programs use this text if the corresponding image cannot be displayed, seen or understood. Even with incorrect or otherwise not displayable images, no information is lost and the visitors still know what the graphic is about. As a result, the ALT texts increase the usability of the page and make it more user-friendly.

The ALT attribute is used in the following cases:

  • Screen readers for the visually impaired read the alternative text aloud.
  • Search engines like Google analyze the content of the ALT text in order to find out what can be seen in the image.
  • In the case of faulty image links or unsupported file formats, web browsers display the content of the ALT attribute.
  • Some Internet users switch off the graphic display in the browser in order to speed up the loading of the page or to save data volume. In these cases, too, the web browser displays the alternative text, as can be seen in the following figure:

Screenshot with ALT attribute with deactivated graphics display from spiegel.de

Search engines place great value on the quality of the ALT texts as it helps them understand the content of the image and the page. Only then are you able to correctly categorize image and page content. In addition, they rate barrier-free and generally accessible websites higher. Accordingly, the attribute is important from an SEO point of view. In addition, good alternative texts improve the ranking of the images in the Google image search. Above all, graphics that have a strong relationship to the page content ensure more traffic, as they redirect additional users from the image search to the actual website. If the images are particularly relevant to a certain search term, they may even be displayed in the organic search results and thus also bring more traffic to the website. With regard to search engine optimization (SEO), the ALT attribute is therefore indispensable.

Specification of the ALT attributes in the HTML code

ALT is a mandatory attribute in HTML. Although most browsers ignore missing ALT attributes, they are required for all IMG and tags of a standards-compliant website. Therefore, the HTML code for referenced graphics must look at least as follows:

<img src="bilddatei.jpg" alt="Alternativer Text">

The attribute must not be missing in the case of purely decorative images such as decorative graphics, background images, lines or frames. However, the alternative text should remain empty in this case, as the image has no meaning in terms of content:

<img src="hintergrund.jpg" alt="">

Speech output systems and other handicapped accessible assistance software ignore such tags.

Requirements for the ALT attribute

The HTML standard prescribes that the alternative text should represent an adequate and full-fledged substitute for the graphic content of an image. In the best case scenario, ALT attributes do not contain any additional content such as attachments or explanations, or titles or captions. They are only intended to provide a textual description of the image content so that the page content is understandable even without the graphics and still has the same informational content.

These requirements do not conflict with the requirements for the ALT attribute with regard to search engine optimization (SEO). In a way, search engines are also blind to graphical content, so they benefit from similar ALT texts as visually impaired people. Good alternative text is useful for blind people, search engines, and users with graphics turned off.

In addition, a perfectly optimized ALT attribute cannot hide the fact that the content is inadequate. An improper use of the alternative text does not help SEO and can - in the case of keyword stuffing - even be counterproductive, as Google and Co. punish such SEO practices.

Suitable alternative texts for different types of images

The optimal content of a high-quality ALT text depends largely on the purpose and content of the image. A good starting point is to ask what text would replace the image if it weren't there in the first place. Furthermore, it helps to differentiate between the following types of images:

  • Independent images: graphic content that stands for itself. For example photos in galleries and albums, demonstrative screenshots of applications, "fun pictures", images to download or buy and the like. The alternative text provides a short but meaningful description of the image including the most important keyword for the image search.
  • Images in running text (inline images): These graphics replace single or a few words for aesthetic or space-saving reasons. These include smileys and emoticons, symbols and icons as well as simple pictograms. The associated ALT attribute contains the text that the picture replaces - for example "grinning smiley" or simply "grin".
  • Illustrative image: Graphs, statistics, explanatory screenshots. If the graphic only summarizes the surrounding text without providing any new information, the ALT text remains empty. Otherwise it contains a short version of the image content. Normal body text is more suitable for longer explanations, as it is useful for all visitors.
  • Decorative graphics without informational content: Background images, frames, lines and the like. Since these images are used exclusively for visual aesthetics, they are given empty ALT attributes.

Difference to the TITLE attribute

While an ALT attribute can only be used on the tag, TITLE is a universal attribute that most HTML elements support. Its purpose is to add comments, brief explanations or additional information. Web browsers display the TITLE content as a tooltip when the mouse is hovered over it. Because of their importance for accessibility and usability, alternative texts are more important for SEO than the image title. Therefore, ALT is mandatory, whereas TITLE is only used sparingly and carefully.

Related Links

Similar articles

To quote the article, just copy this link:
https://www.seobility.net/de/wiki/ALT_Attribute