Home | Site Navigation | Internal Page Navigation | No-Follow | Images
Styles | New Window | | Privacy | Purchase Book on HTML

Anchor Tags and Image Tags

If you want to make an image into a link simply surround the image tag with an anchor tag like this:

<a href="www.indepthinfo.com"><img src="http://www.indepthinfo.com/gifs/smlogo2.gif" alt="InDepthInfo" border="0" width="95" height="43"></a>.

There are many reasons a web author may want to do this. It can improve a website's design and flow. A banner might link to an advertiser. A political cartoon might link to a candidate. In spite of all these very sound reasons for using images as links, the web author should realize that such links carry different weights with different search engines (usually less weight). So if there is a beautiful linking scheme using images, it should be supplemented with text links, perhaps at the bottom of a page in order to ensure proper attention from the Google bot, et al.

When images are used for linking in this manner note that there are several attributes within the image tag that should probably be used. The "alt" attribute is used to indicate the subject of the image. It was originally designed to insert text in place of the image, should it be unavailable. Also it is used in programs that make the internet more accessible for the handicapped. This attribute also tells search engines what the image is about so that it can be properly indexed.

The border attribute has a definite visual effect. When the image is made into a link by an anchor tag, the resulting image will be surrounded by a blue border unless the border attribute is set to "0". The number in this position indicates how thick the border of the image will be. (In a style sheet the attribute could be given: a:link IMG, a:visited IMG { border-style: none; }1.) The image should also be given height and width attributes. These are designated in pixels, and help the browser to quickly render a page. Without them the browser does not know how big the images are until they are downloaded, and if they happen to not show up at all, the structure of the page may be distorted.

A grey button with a link can also be created using just a bit of fancy coding:

<form>
<input type="button" value="Home Page" onclick="window.location.href='http://www.howtomakealink.com'">
</form>


The value attribute is what is shown in the button box. Here is what this code would result in:

Using anchor tags as links with images is essential knowledge for a webmaster. Also important is to know what can be done with stylesheets. Read on to find out about: Anchor Tags and Cascading Style Sheets.


1. Dealing with the Anchor Tag





Contact Us