Attributes for hyperlink and image elements

To specify which hyperlink or image to use, we provide a location, or address. Since providing addresses does not make sense for all elements, the attributes we use for this purpose are not global attributes. Moreover, since the address information is used in different ways for hyperlinks and images, there are two different attributes used.

Providing an address for a hyperlink

The attribute used to provide the address of the destination anchor of a hyperlink is the hyperlink reference attribute (href); the value will specify either another page or, as we will discuss soon, a particular element (on the same page or on a different page). The location of a page is given as a Uniform Resource Locator (URL). For this course, all you need to know about URLs is that they indicate which web page should be loaded.

Here is an example of a hyperlink element:

<a href="http://cemc.uwaterloo.ca">CEMC</a>

Providing an address for an image

The source attribute (src) is used to indicate the source from which an image, video, or audio file can be obtained. Remember that an image element is an empty element, and hence uses a single tag. The syntax for specifying an attribute for an empty element is like what we have seen before: the name of the attribute, an equals sign, and the value in quotation marks all appear in the tag.

Here is an example of an image element with four attributes:

<img src="balloons.jpg" height="200px" width="100px" alt="Picture of balloons">

You will often see the format jpg used for a photograph or other image that uses lots of colours and the format png used for a simple icon. There is a trade-off between the quality of the image and the space needed to store the image.

It is good practice to provide a description to be displayed if an image fails to load; this description can also be read by screen readers. This can be accomplished using the alternative text attribute (alt), for which the value is the description. It is also good practice to provide a height attribute (height) and width attribute (width) for an image so that the browser knows how much space to allocate for the image while loading other elements. The exception to this general advice is when we wish for an image to be able to be resized.

The designation px in the sizes refers to pixels, which are the individual dots of colour from which a screen image is formed.