Inserting images in web pages is done by placing an
img tag in the HTML code. The
<img> tag is an empty tag. Its
src attribute is used to reference an image file using a relative or absolute path. The syntax is as follows:
<img src="path_to_image_file" alt="alternative text">
The following page shows how to use the
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Images</title> </head> <body> <h1>Images</h1> <p><img src="http://www.google.com/images/logo.gif" alt="Logo"></p> <hr> <p><img src="Images/Pooh.jpg" alt="Pooh Bear"></p> <hr> <p><img src="Images/RunnersHome.gif" alt="Runners Home"></p> </body> </html>
The page will render as follows:
To add alternate text for an image, use the
<img src="logo.gif" alt="Logo">
Alternate text is displayed...
Alternate text can also be used by screenreaders to describe an image for the visually impaired.
If an image depicts something complicated, such as a graph or chart, a long description of the image can be provided on a separate page. The
longdesc attribute of the
<img> tag is used to point to that description. For example:
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Long Description</title> </head> <body> <h1>Long Description</h1> <p><img src="Images/BigMac.jpg" alt="Big Mac Nutrition Information" longdesc="BigMac.html"></p> </body> </html>
The browsers don't do anything with the
longdesc value, but modern screenreaders make use of it. Freedom Scientific, the makers of Jaws, one of the most popular screenreaders, say this about their support for
JAWS now supports the "Longdesc" attribute in HTML within Internet Explorer 5.x and 6. The "Longdesc" attribute allows a long description of graphics to be provided on a separate page. The "Longdesc" attribute contains the address of the descriptive page. After reading any Alt text for the graphic, JAWS announces there is a long description and the address of the page. Just press ENTER to open the page containing the long description in a new window.