However, this also precludes SVG files with script, multipage PDF files, interactive MNG files, HTML documents, plain text documents, and so forth.
HTML Attributes
alt = normal character data Gives the fallback content for the image. The requirements on the alt attribute’s value are described in the next section.
src = URL potentially surrounded by spaces Specifies a URL referencing a non-interactive, optionally animated, image that is neither paged nor scripted.
usemap = hash-name reference Specifies a hash-name reference to a map element with which to associate the object.
Requirements for providing text to act as an alternative for images
A link or button containing nothing but the image
When an a element that creates a hyperlink, or a button element, has no textual content but contains one or more images, the alt attributes must contain text that together convey the purpose of the link or button.
In this example, a user is asked to pick his preferred color from a list of three. Each color is given by an image, but for users who have configured their user agent not to display images, the color names are used instead:
A phrase or paragraph with an alternative graphical representation
Sometimes something can be more clearly stated in graphical form, for example as a flowchart, a diagram, a graph, or a simple map showing directions. In such cases, an image can be given using the img element, but the lesser textual version must still be given, so that users who are unable to view the image (e.g. because they have a very slow connection, or because they are using a text-only browser, or because they are listening to the page being read out by a hands-free automobile voice Web browser, or simply because they are blind) are still able to understand the message being conveyed.
It is important to realize that the alternative text is a replacement for the image, not a description of the image.
In the following example we have a flowchart in image form, with text in the alt attribute rephrasing the flowchart in prose form
In the common case, the data handled by the tokenization stage comes from the network, but it can also come from script.
A short phrase or label with an alternative graphical representation
A document can contain information in iconic form. The icon is intended to help users of visual browsers to recognize features at a glance.
In some cases, the icon is supplemental to a text label conveying the same meaning. In those cases, the alt attribute must be present but must be empty.
In the following snippets, all four of the above cases are present. First, we see a logo used to represent a company:
Next, we see a paragraph which uses a logo right next to the company name, and so doesn’t have any alternative text:
News
W3C was .
In this third snippet, we have a logo being used in an aside, as part of the larger article discussing the acquisition:
Finally, we have an opinion piece talking about a logo, and the logo is therefore described in detail in the alternative text.
Consider for a moment their logo:
Text that has been rendered to a graphic for typographical effect
Sometimes, an image just consists of text, and the purpose of the image is not to highlight the actual typographic effects used to render the text, but just to convey the text itself.
In such cases, the alt attribute must be present but must consist of the same text as written in the image itself.
A graphical representation of some of the surrounding text
A document can contain information in iconic form. The icon is intended to help users of visual browsers to recognize features at a glance.
In some cases, the icon is supplemental to a text label conveying the same meaning. In those cases, the alt attribute must be present but must be empty.
A purely decorative image that doesn’t add any information
In general, if an image is decorative but isn’t especially page-specific, for example an image that forms part of a site-wide design scheme, the image should be specified in the site’s CSS, not in the markup of the document.
However, a decorative image that isn’t discussed by the surrounding text but still has some relevance can be included in a page using the img element. Such images are decorative, but still form part of the content. In these cases, the alt attribute must be present but its value must be the empty string.
A group of images that form a single larger picture with no links
When a picture has been sliced into smaller image files that are then displayed together to form the complete picture again, one of the images must have its alt attribute set as per the relevant rules that would be appropriate for the picture as a whole, and then all the remaining images must have their alt attribute set to the empty string.
In the following example, a picture representing a company logo for W3C has been split into two pieces, the first containing the letters «W3» and the second with the word «C». The alternative text («W3C») is all in the first image.
A group of images that form a single larger picture with links
Generally, image maps should be used instead of slicing an image for links.
However, if an image is indeed sliced and any of the components of the sliced picture are the sole contents of links, then one image per link must have alternative text in its alt attribute representing the purpose of the link.
A key part of the content
In some cases, the image is a critical part of the content. This could be the case, for instance, on a page that is part of a photo gallery. The image is the whole point of the page containing it.
How to provide alternative text for an image that is a key part of the content depends on the image’s provenance.
The general case When it is possible for detailed alternative text to be provided, for example if the image is part of a series of screenshots in a magazine review, or part of a comic strip, or is a photograph in a blog entry about that photograph, text that can serve as a substitute for the image must be given as the contents of the alt attribute.
Images that defy a complete description In certain cases, the nature of the image might be such that providing thorough alternative text is impractical. For example, the image could be indistinct, or could be a complex fractal, or could be a detailed topographical map. In these cases, the alt attribute must contain some suitable alternative text, but it may be somewhat brief.
A black outline of the first of the ten cards in the Rorschach inkblot test.
Images whose contents are not known In some unfortunate cases, there might be no alternative text available at all, either because the image is obtained in some automated fashion without any associated alternative text (e.g. a Webcam), or because the page is being generated by a script using user-provided images where the user did not provide suitable or usable alternative text (e.g. photograph sharing sites), or because the author does not himself know what the images represent (e.g. a blind photographer sharing an image on his blog). In such cases, the alt attribute may be omitted, but one of the following conditions must be met as well:
The title attribute is present and has a non-empty value.
The img element is in a figure element that contains a figcaption element that contains content other than inter-element whitespace, and, ignoring the figcaption element and its descendants, the figure element has no text node descendants other than inter-element whitespace, and no embedded content descendant other than the img element.
An image not intended for the user
Generally authors should avoid using img elements for purposes other than showing images.
If an img element is being used for purposes other than showing an image, e.g. as part of a service to count page views, then the alt attribute must be the empty string.
In such cases, the width and height attributes should both be set to zero.
An image in an e-mail or private document intended for a specific person who is known to be able to view images
When an image is included in a private communication (such as an HTML e-mail) aimed at a specific person who is known to be able to view images, the alt attribute may be omitted. However, even in such cases it is strongly recommended that alternative text be included (as appropriate according to the kind of image involved, as described in the above entries), so that the e-mail is still usable should the user use a mail client that does not support images, or should the document be forwarded on to other users whose abilities might not include easily seeing images.
Example
Example A
Here’s another example, showing a good solution and a bad solution to the problem of including an image in a description.
First, here’s the good solution. This sample shows how the alternative text should just be what you would have put in the prose if the image had never existed.
You are standing in an open field west of a house. There is a small mailbox here.
Second, here’s the bad solution. In this incorrect way of doing things, the alternative text is simply a description of the image, instead of a textual replacement for the image. It’s bad because when the image isn’t shown, the text doesn’t flow as well as in the first example.
You are standing in an open field west of a house. There is a small mailbox here.
HTML Reference
The HTML5 specification defines the element in 4.8.1 The img element.
Тег предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src . Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег в контейнер . При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border=»0″ в тег .
Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выступающие в качестве ссылок. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.
Синтаксис
Атрибуты
align Определяет как рисунок будет выравниваться по краю и способ обтекания текстом. alt Альтернативный текст для изображения. border Толщина рамки вокруг изображения. height Высота изображения. hspace Горизонтальный отступ от изображения до окружающего контента. ismap Говорит браузеру, что картинка является серверной картой-изображением. longdesc Указывает адрес документа, где содержится аннотация к картинке. lowsrc Адрес изображения низкого качества. src Путь к графическому файлу. vspace Вертикальный отступ от изображения до окружающего контента. width Ширина изображения. usemap Ссылка на тег , содержащий координаты для клиентской карты-изображения.
Также для этого тега доступны универсальные атрибуты и события.
was .
was .
Lorem ipsum dolor sit amet.
There is a small mailbox here.
