Basics of links

To define links in XHTML, the anchor tag, <a> is used. Links allow you to jump from one document to another. The href attribute is required to define the anchor because it contains the destination document. To make a link, you need the following pieces of information:

  1. anchor tag
  2. href attribute set to the destination of your document
  3. text or graphic that will be used to activate the link

The opening anchor tag starts the instruction of a link definition. The href attribute is placed inside the opening anchor tag. The attribute set to the URL of the target resource or the landing page. So if you want to link to scriptingMaster.com, you would set href="http://www.scriptingmaster.com". To make the link navigateable, you also need link text (or image if you want to set up an image as link). The link text is also referred to as "hot spot." Figure 1 shows the main parts of a typical link syntax.

Figure 1 XHTML anchor tag syntax
Figure 1 XHTML anchor tag syntax

As figure 1 shows, a link has five parts:

  1. the opening anchor tag
  2. the href attribute to set the destination address of the document
  3. link text, images, or mixture fo the two. This is needed to activate the link
  4. URL - this is the destination or landing page
  5. closing of anchor tag

If you are missing one or more of these elements in your link syntax, your link is likely not to work properly.

Link rendering

The following shows an example of creating a link:

<a href="http://www.google.com">Google</a>

This link creates an anchor to the homepage of Google. The link text is Google. This is what will appear in the web browser to activate the link. In other words, this is the text that will be clicked to visit Google. Web browsers, by default, display the text links as blue and underlined. See figure 2. Image links, on the other hand, appear with a blue border.

Figure 2 rendering of links in XHTML documents
Figure 2 rendering of links in XHTML documents

Above the word "Google" is displayed as blue and is underlined. The link text ("Google") has rectangle around it to distinguish it from other links, which are displayed using other styles.

Because the link is placed on this web page, this page is referred to as the originating document. A linked document, on the other hand, is the destination site or document. In simple terms, think of originating document as from which the link is pointing, and think of destination document as to which the link is pointing. So from which document the link is created, it is referred to as the originating document.