Inserting Images

Contact Us or call 1-877-932-8228
Inserting Images

Inserting Images

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:

Syntax

<img src="path_to_image_file" alt="alternative text">

The following page shows how to use the <img> tag:

Code Sample:

Images/Demos/Images.html
<!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:

Making Images Accessible

Alternative Text

To add alternate text for an image, use the alt attribute.

<img src="logo.gif" alt="Logo">

Alternate text is displayed...

  • When the user's browser does not support images.
  • As the image is downloading.
  • When the user hovers over the image with the mouse (in some browsers).

Alternate text can also be used by screenreaders to describe an image for the visually impaired.

Long Descriptions

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:

Code Sample:

Images/Demos/LongDesc.html
<!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 longdesc:

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.

Next