The a Element

The <a> element defines an anchor. It is used for two purposes: to create a hyperlink and to create a fragment. A hyperlink is a clickable area that when clicked, will take the user to another document or to a particular element in the same document.

The <a> element is an inline element, therefore it must have a block element as an ancestor. It can contain text or child inline elements. Therefore, text, images, inline elements, and line breaks can be made hyperlinks. The href attribute of the <a> element contains the destination of the hyperlink. The destination can be another webpage or file, or it can be a fragment in the same or a different page.

Below is an example of a hyperlink to an HTML document.

Example 1: <a href="about.html">About Us</a>

Below is an example of an image hyperlink.

Example 2: <a href="large.jpg"><img src="small.jpg" alt="an image"></a>

A fragment is an element in a document that has been labelled using the name or the id attribute.

The W3C HTML 4.01 specification for links states "Destination anchors in HTML documents may be specified either by the a element (naming it with the name attribute), or by any other element (naming with the id attribute)". The name and id specification for XHTML 1.0 states "XHTML 1.0 documents MUST use the id attribute when defining fragment identifiers".

Therefore, the name attribute should never be used in XHTML 1.0 documents (except in form control elements where they are allowed). In HTML 4.01 documents, either the name or the id attribute can be used to specify fragments. To conclude, it is best to use only the id attribute irrespective of document type (HTML or XHTML).

Example 3: <p name="product_1">The five boxing wizards jump quickly.</p>

Example 4: <p id="product_1">The five boxing wizards jump quickly.</p>

The first example shows a fragment in an HTML 4.01 document. The second example shows the same fragment in an XHTML 1.0 or HTML 4.01 document, created using the id attribute. In both cases, the fragment can be referenced from within the same document by a hyperlink as shown in the example below.

Example 5: <a href="#product_1">Go to Product 1</a>

The fragment shown in Example 3 and Example 4 can be accessed from another document by including the filename followed by the hash symbol and fragment name, as shown below.

Example 6: <a href="products.html#product_1">Go to Product 1</a>

The id value must begin with a letter and can contain numbers, hyphens, underscores, colons and periods. An id must be unique in a page.

The a element can have one title attribute that specifies a description of the hyperlink. It is displayed as a tooltip when the mouse moves over the link.

Transitional DTD's allow the a tag to have the target attribute. With this attribute, you can specify the name of the window in which the link should open.

Example 7: <a href="news.html" title="news.html" target="stuff">

This will cause news.html to open in a new window. This window will have the internal name "stuff". If a window with the internal name "stuff" is already open, then news.html will open in it.

The target attribute is also useful in frame documents. Using this attribute links in one frame can open in another.

Special Targets

There are four special target values - _blank , _self , _parent and _top .

_blank

This target causes the linked document to always open in a new window. The new window will not have an internal name.

_self

This target causes the linked document to always load in the same window or frame as the link. This is the default behavior of links. This target value is useful to override the target specified in the base tag of the document. _parent

This causes the linked document to open in the parent of the document that contains the link. This is useful when using iframes. The document in the iframe can have links that when clicked, cause the linked document to open in the entire window rather than in the frame.

_top

This causes the linked document to open in the topmost frame in the hierarchy. In a framed document, it is useful to include this attribute in all links that lead to other websites. This prevents outside websites from loading within the same frameset.