XHTML 5 Reference

go to previous section go to next section


Images and Links

Images

The <img src="" alt=""/> tag is used to place images within your page. These images can be gif, jpeg or png image files or if you have a pdf reader installed into the browser can be pdf documents. The src attribute identifies the address of the image to be displayed while the alt attribute specifies text to be displayed instead if for whatever reason the image itself is not able to be displayed.

There are a number of optional attributes available to use with the img tag. The optional width and height attributes allow you to specify the size of the image in advance so that the page doesn't need to be rearranged once the image is finally loaded and so that the alternate text will use the same space as the image if the image can't be displayed. The longdesc attribute allows you to provide the address of content displaying a description of the image. The usemap attribute allows the image to be defined as an image map (see below).

Links and Anchors

The <a href=""> </a> tag pair is used to define parts of your page (whether text or images) as a link to another page (or to elsewhere on the same page). The href value identifies the page or anchor to which the link is attached and to which the user will be transferred if they click on the link. Any id in a web page can serve as the anchor to be linked to. Note that while the href is considered optional the tag serves no purpose without it.

While a few optional attributes exist for the <a> tag there is almost never any reason for using any of them apart from the rel="" attribute that defines what the link points to. The <a> tag is no longer used as the anchor point for links.

An <a> tag may not be nested within another <a> tag.

Image Maps

Image maps allow one image to contain multiple links. In this instance the image needs to be defined using the usemap="#mapname" attribute.

The <map id="mapname"> </map> tag pair is used to contain the definitions of various areas of an image each of which is to link to a different place.

A number of >area shape="" coords="" alt=""/> tags are defined within the map to identify which parts of the map link where. The shape attribute defines what shape the particular area is to have while the coords attribute defines the area within the image. Valid shapes include "rect" where the cords required are the top left x and y and bottom right x and y coordinates, "circle" where the x and y coordinates of the centre of the circle and the radius are required as coordinates, and "poly" where a series of x and y coordinates are provided to define the shape. The area tag also needs to have either an href attribute identifying where that part of the image links to or a nohref="nohref" attribute indicating that this part of the image is not a link.

go to previous section go to next section

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate