w3-video.com logo

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

Share it

img alt attribute

The alt attribute on the img element:



The same image can be embedded multiple times in the same page and have different alternative text each time.
The image is part of the context, it is representative for the context, it is correlated with the context → different contexts can lead to different alt text for the same image.


<imgattribute="value(s)" >Examples
1.alt="", text<img src="images/puppy.jpg" alt="a grey puppy standing in the middle of a room">

Video demonstration img alt attribute

HTML5 img alt attribute Tutorial

min video details
00:08 the alt attribute on img
00:08 the alt attribute on img allows you to add text that will display in the place of the image when that embedded image cannot be displayed
00:13 this alternative text should serve as a viable replacement for the image and obviously should convey the same meaning
00:19 alt attribute is always required except when it can't be provided: e.g. the case of an interface that allows users to upload pictures and an alternative text cannot be asked to them...
00:25 next we will present few cases when alt attribute is present and its value is:
1. "" (empty string)
2. alternative text
00:34 1. alt=""
empty string "" accepted when the image has a decorative role or it's supplemental
00:36 this image is supplemental, next to it we have its corresponding text → it's not useful supplying 2 times the same information
00:50 the image is decorative; it adds no extra information to our article
00:58 the alternative text could be 'sunset' which is also the title of the article → nothing new;
01:07 2 times sunset..we can remove this value of the alt attribute → the empty string
01:21 2. alt="corresponding alternative text"
it's the most common case; the image is important to the context so an alternative text is necessary for your context to still have the same sense when the image is not displayed
01:25 for example this image has important content: if the image is not displayed, the users won't understand a thing
01:39 test: the image didn't display, the alt text is missing, displays only "You won't regret it!" → but nobody knows what the non-regret is about → a value for the alt attribute is necessary
01:50 the image didn't display; the alt text displays in its place, everything is clear
02:02 this image is important for the context, and it is highly discussed → a viable, alternative text should be provided and it is
02:16 the cup plate can also be presented
02:24 alt attribute must always be added to img tag, except when it can be provided. When added, accepts no value ("" empty string) if the image is decorative or supplemental, otherwise, when the image is important for its context, an alternative text should be supplied
img intro img optional img occurrences img browser display img parents server-side image map (ismap) vs client-side image map (usemap) img syntaximg ismap attributeimg usemap attributeimg width, height attributesimg src attributeimg accesskey attributeimg class attributeimg draggable attributeimg hidden attributeimg id attributeimg lang attributeimg style attributeimg tabindex attributeimg title attributeimg translate attribute