2.6 How to Create Hyperlinks and Anchors in HTML

Hyperlinks are, central to the Web, and it’s difficult to imagine a Web page that does not contain at least a few. An anchor is a way to identify a specific location in a Web page so that a hyperlink to that location and not just to the page as a whole.

Hyperlinks

To create a hyperlink, you use the <a> tag. The syntax is as follows:

<a href='URL'>Link Text</a>

In the browser, Link text will be displayed usually with a blue underline. When the user clicks the link, the browser will navigate to the location specified by URL. You can also use an image for the link by inserting an <img> tag within the <a> tags.

<a href='URL'><img src='linkingimage.gif' /></a>

In both case, it is important to include the http://  part of the URL:

<a href='http://wbuhc.blogspot.com'>Website Building Using HTML and CSS</a>

Many links on a Web Pages are often to other pages on the same Website. If the target page is in the same folder as the current page, then the <a> tag need to include only the name of the target page.

<a href='about.html'>About Us</a>

If the target page is in a different folder on the same Website, then the link must indicate on the file location:

<a href='docs/about.html'>About Us</a>

To link to an anchor in a Web page, put the anchor name at the end of the URL, separate by a pouns sign (#):

<a href='http://www.wbuhc.blogspot.com#AnchorName'>Linking Text</a>

You can use a hyperlink to let the user download a file onto their computer. All you need to do is specify the file name as the href attribute. This link, for example, will let the user download the specified file:

<a href='SecretCode.txt'>Download Secret Code</a>

You can also use the <a> tag to create an anchor, using the name attribute instead of the href attribute:

<a name='AnchorName'>Text to be anchored</a>

Each anchor name must be unique within the document. Text that is anchored is not displayed in any special way. You can create an “empty” anchor by simply not including any text within in <a> tag:

<a name='AnchorName'></a>

Linking to the Top of a Page

When you have a long Web page, it’s a good idea to include some links that let the user return to the top of the document with a single click. First, place an anchor named top at the start of the document:

<a name='top'></a>

Then, place hyperlinks like this one at the desired locations in the document:

<a href='#top'>Return to top</a>