<html>

Topic:

What is the code for putting a graphic on a web page? Most people would answer: <img src="[name of graphic file]"> and be done. That is a big mistake.

For this class and for good web design, always add both the "alt" name and the dimensions of the graphic to your code.

After typing the name of the graphic file add alt="[few words about content of graphic]".These should be five words or less, not a long description. The "alt" tag is just that--an alternative to the graphic. What purpose does the graphic serve on your page? What alternative is necessary for those who do not view graphics in order for them to understand and enjoy your page? This is not always just a description of the graphic. For example, the alt tag for the html 4.0 symbol below is not "html logo," but "validated html 4!" The icon means that the page was validated. The "alt" tag tells what your graphic signifies. For a thorough discussion of selecting text for alt tags see the link to Alan J. Flavell's remarks.

What you put in the "alt" tag become the words that appear in the space while your graphic is loading or that appear in the tooltip box that pops up when your mouse passes over the graphic when using Explorer. More important, if anyone looks at your page using a text-based browser, a screen reader, a Palm or other hand-held device, they have some idea about what the graphic contributes to your information. In addition, some indexing robots also search your alt tags when ranking your page for search engines.

These alt tags are especially important if you use a graphic for buttons or fonts, or the buttons and fonts will be lost when the graphic is not used. These alt tag should repeat the words in the image.

What if your graphic is just a decorative touch without particular informational content--such as a border or bullet icon? Then you should still add alt="" with nothing in between the quotation marks. Or put "-" or "*" since many readers do not report punctuation. This will silence the screen readers so they don't say something like "graphic here".

Just remember, it is carved in stone:

Thou shalt
always
use an "alt" tag
with graphics!

Continue to "Notes on Speeding the Load" >>

Other comment notes for this unit:
dimensions | using sources | thumbnails

(stone background is from www.Resourcelane.com)

Readings	Resources	<head>	<p> etc.	<b> etc.	<li> etc.	<a href>	<img src>
Access	<table>	<frame>	<style>	<form>	<script>	<object>	validate

<html>

<img src=. . .alt=>