Attributes - (X)HTML webDev

alt="" alt Attribute: BulletProof HTML: 37 Steps To Perfect Markup

Yes, the alt="" attribute is required for the img element type. Why? Well, not all users can see images and not all user agents can understand or display images. For example:

  • * A person who is blind or has very low vision cannot see an image. A screen reader cannot describe an image.
  • Users with slow connections (dial-up or mobile) sometimes disable images for faster surfing.
  • Text browsers like Lynx do not support images.
  • Search engine bots cannot understand images.

Thus we have to provide a text equivalent for each image, using the alt attribute. This text equivalent should not describe the image; it should convey the equivalent information. Writing good text equivalents is not easy, and it takes a lot of practice. Remember that the text equivalent is displayed instead of the image.

So what is a good text equivalent for a given image? That depends on the context in which the image is used! It's not like there is a single "perfect" text equivalent for each image. Let us look at an example: say we have an image of a grazing cow. This particular cow happens to be an Aberdeen Angus. Let us then consider a few use cases for this image.

In the first case, this image is used as a generic illustration for an article about beef cattle farming in Scotland. The actual cow isn't germane to the article; it's just an illustration, a decorative design element that draws the reader's eye and relieves the monotony of the text. In this case, the image doesn't convey any relevant information. Therefore it should have an empty text equivalent: alt="".

In the second case, the image is used on a children's web site about farm animals. The page shows pictures of various animals: a horse, a sheep, a pig, a cow, etc. Next to each image is a block of text that presents some facts about each species. In this case, alt="Cow" could be appropriate. It's not important that it's an Aberdeen Angus; the picture represents bovine quadrupeds in general.

In the third case, the image is used on a site about different breeds of cattle. Here it is used to illustrate what an Aberdeen Angus looks like, and how it is different from other breeds. The page comprises a number of images, each with a caption that identifies the breed, but no other textual information. In this case, the text equivalent should describe the particular attributes and traits that are specific to an Aberdeen Angus: the robust build, the massive chest, the relatively short legs, the buffalo-like hump behind the head, etc.

In the fourth case, the image is used on a photographer's portfolio page. It's one image among several others, with very different motifs. This is one of the few cases where the alt attribute might actually include a description of the image itself, e.g., "A black Aberdeen Angus grazing in the sunshine with Ben Nevis in the background."

As we can see, the appropriate text equivalent depends on the context. Sometimes (often, actually) it should be empty, because the image doesn't convey any information that isn't available in the accompanying text. Some claim that such images should be background images specified via CSS, but there are many cases where that is impractical and where the image is really part of the content -- even though it doesn't convey any useful information to those who cannot see it.

For images that contain text, the text equivalent should of course replicate the text in the image. For things like pie charts, the text equivalent should convey information about the percentages -- the same information as the image conveys.

The alternate text shouldn't be too long. Some browsers don't word-wrap text equivalents, and they cannot be formatted in any way. If we need a longer text equivalent, we should put it somewhere else and link to it via the longdesc attribute.

Internet Explorer and old Netscape browsers display the alt attribute in a tool-tip when the user hovers the mouse pointer over the image. This constitutes an incorrect use of text equivalent data. We should use the title attribute for "tool-tip" information. To suppress the alternate text appearing in tool tips, we can use an empty title: title="".

scope ATTRIBUTE - FROM SITEPOINT...LOOK THIS UP

http://reference.sitepoint.com/html/td/scope

The defer="" Attribute

The defer="" attribute – written defer="defer" in XHTML – is a fairly useless attribute of the <script> tag. It tells the browser that the <script> does not create any content allowing the browser to defer interpreting the <script>. The delaying of execution of <script>s until after the <body> content is parsed and rendered is optional for the browser, and the browser still downloads the <script>, putting download of all other elements on hold, so unless there is a reason to include the <script> earlier in the page, the recommendation is to place the external <script> call immediately before the </body>.

The runat="" Attribute

The runat="" attribute – written runat="server" in XHTML is an optional attribute/value. I haven’t ever used it, so can’t really comment on it. I assume it’s used for non-JavaScript <script>s and for ASP.net javascripts, telling the server to run the <script>, or, in the case of any element in ASP.net, on the server.

defer ATTRIBUTE - THIS IS FROM EVOTECH...LOOK IT UP!

# The defer attribute – written defer="defer" in XHTML – is a fairly useless attribute of the script tag. It tells the browser that the script does not create any content allowing the browser to defer interpreting the script. The delaying of execution of scripts until after the body content is parsed and rendered is optional for the browser, and the browser still downloads the script, putting download of all other elements on hold, so unless there is a reason to include the script earlier in the page, the recommendation is to place the external script call immediately before the </body>.

runat ATTRIBUTE - THIS IS FROM EVOTECH...LOOK IT UP!

# runat="server" is an optional attribute/value. I haven’t ever used it, so can’t really comment on it. I assume it’s used for non-javascript scripts and for ASP.net javascripts, telling the server to run the script, or, in the case of any element in ASP.net, on the server.

Attributes - (X)HTML webDev