HTML Linking Basics

There are many "wysiwyg" webpage design applications that let you create a webpage as easy as typing text. But many people have difficulty linking their webpage to other webpages and media. The stumbling block is knowing how to use absolute and relative links to webpages and media files.

In this article you'll learn how to use absolute and relative links to link to webpages and media files in the same folder, different folders, different websites, and even to specific locations within the same webpage or a different webpage.

Use the <a> tag to create an html link. The basic <a> tag has the href attribute, which specifies the protocol (http), URI (path) to the target object, and the link text, as shown below.

<a href="http://bucarotechelp.com/default.asp">Bucaro Techelp</a>

• URI stands for Uniform Resource Identifier, which used to be called the URL (Uniform Resource Locater). Why they changed it, I don't know. I'm sure there's some subtle difference between URL and URI, in either case, it's the address of the webpage or media file that you want to link to. A URI cannot have spaces or certain other characters and, unlike Windows paths, uses forward slashes rather than "backslashes" to denote different directories.

For instructional purposes, let's assume that the file name of your webpage is mypage.htm and that it's located in a subdirectory named content of your website which has the domain name www.mydomain.com. The location of your webpage is then:

www.mydomain.com/content/mypage.htm

Therefore, anyone who wants to link to your webpage would use the link shown below.

<a href="http://www.mydomain.com/content/mypage.htm">Link Text</a>

Now, let's assume that you create another webpage named page2.htm and place it n the same folder as mypage.htm. A diagram of the directory structure is shown below.

[content]
  mypage.htm
  page2.htm

Let's further assume that you want to place a link in mypage.htm that loads page2.htm. The code for this link is shown below.

<a href="http://www.mydomain.com/content/page2.htm">Page 2</a>

The link shown above is an absolute link because it contains a fully qualified URI, in other words, the complete path to the webpage. You can always use an absolute link to link to other webpages or media.

The base URI of a webpage is its URI minus the file name. Both webpages have the same base URI: www.mydomain.com/content/. So you could use a shorter relative path in the link. The code for a link in mypage.htm to page2.htm using a relative path is shown below.

<a href="page2.htm">Page 2</a>

For instructional purposes, let's assume that the webpage you are coding is a menu that contains many links to webpages in a different folder, named content2. A diagram of the directory structure is shown below.

[content]
  mypage.htm
  page2.htm
[content2]
  page3.htm

As I said, you could use absolute links for every menu item, but that might get tedious. Instead you could use the html <base> tag to change the base of the webpage containing the menu. The code for this example <base> tag is shown below.

The <base> tag must be placed in the <head> section of your webpage. Then you could use a shorter relative link to load a page in the content2 folder.

What if you created a subfolder within the content folder named information, and you wanted to place a link in

www.mydomain.com/content/page2.htm to
www.mydomain.com/content/information/page4.htm

[content]
  mypage.htm
  page2.htm
  [information]
    page4.htm
[content2]
  page3.htm

Again, you could use an absolute link, or you could use the relative shown below.

The website file manager interprets this as "look in the folder named information for the file named page 4.htm.

For instructional purposes, let's say that, on your website, you created the directory structure shown below.

[content]
  mypage.htm
  page2.htm
  [information]
    page4.htm
    [names]
      [employees]
         page5.htm
[content2]
page3.htm

What is the code for a relative link in content/mypage.htm to page5.htm?

What is the code for a relative link in page4.htm to page5.htm?

• It's easy to create relative links when you imagine yourself standing in the directory structure at the same level as the page you want the link to be in, asking yourself "how do I get to the destination file from here?"

Until now, all of our links have been down looking. But what if we want to link to a file that is higher in the directory structure? Referring to the directory structure shown below, what if we want to place a link in Page4.htm that loads page2.htm?

[content]
  mypage.htm
  page2.htm
  [information]
    page4.htm
    [names]
      [employees]
         page5.htm
[content2]
page3.htm

The code for a relative link in page4.htm to content/page2.htm is shown below.

The website file manager interprets this as "go up one directory level, then look down in the folder for the file named page2.htm".

What if we want to place a link in Page5.htm that loads page2.htm? The code for the relative link is shown below.

The website file manager interprets this as "go up three directory levels, then look down in the folder for the file named page2.htm".

• It's easy to create up looking relative links when you image yourself standing in the directory structure at the same level as the page you want the link in and asking yourself "how do I get to the destination file from here?"

Before we go on to in-page links, let's try an advanced relative link example. What is the code for a relative link from page4.htm to page3.htm?

[content]
  mypage.htm
  page2.htm
  [information]
    page4.htm
    [names]
      [employees]
         page5.htm
[content2]
page3.htm

The website file manager interprets this as "go up two directory levels, then look down in the folder for a subfolder named content2 then look for the file named page2.htm.

If you were able to guess that one, you truly are the Web page linking expert. But what if you want to place a link in one part of a webpage that jumps to another part of the same webpage? For example, you're writing an article about meteors and you mention the word bolide which you cover later in the article. You would like to link the word bolide to its explanation further down the webpage.

In-Page Links

To place a link in one part of a webpage that jumps to another part of the same webpage, find the word or phrase that you want to jump to and place it in a named anchor. An example of this is shown below.

<a name="explanation">bolide</a>

• The anchor word or phrase will not be highlighted or underlined like a link, so you might want to also place the anchor word or phrase within (bold) tags so it stands out from the rest of the text.

<a name="explanation">bolide</a>

• In the anchor, an id attribute will work the same as a name attribute and id is more in conformance with modern DHTML specifications.

<a id="explanation">bolide</a>

Next, place the word you want to click on to jump to the anchor in a link. An example of this is shown below.

<a href="#explanation">Bolide</a>

This time the link will receive the normal highlighting and underlining. Note the # symbol in front of the anchor's name. This is called the "fragment identifier". Now when you click on this link, the webpage will scroll to the part of the webpage containing the anchor named explanation.

What if you want to place a link in a webpage that jumps to a specific section of a different webpage? Lets go back to the advanced relative link example. what's the code for a relative link from page4.htm to a specific seection in page3.htm?

First, place a named anchor at the word or phrase that you want to jump to in page3.htm, using the same code as before. Then, in page4.htm place a relative (or absolute) link to page3.htm, except this time, tack the fragment identifier onto the end of the URI. An example of this is shown below.

<a href="../../content2/page3.htm#explanation">Bolide</a>

What's so special about relative links? Wouldn't it be easier to just use absolute links for everything?

The advantage of relative links is that you can relocate parts of your file structure without editing all of the links between pages and links to media files. In fact, with relative links, you could move your entire website file structure to another domain without changing a single link.

Link Tag Attributes

The <a> tag has few attributes. The most useful one is the target attribute, which can be used to cause the target of the link to open in a new browser window. An example of the target attribute is shown below.

<a target="_top" href="http://bucarotechelp.com">Bucaro Techelp</a>

I find the target attribute very useful, unfortunately, it has been deprecated in html version 4. "Deprecated" means stop using it because it may disappear in future versions. There are ways to work around the problem, for example using JavaScript or extending the xhtml DTD, but how to do that is outside the scope of this article. Just use the HTML 4.01 transitional DOCTYPE and the target attribute will work.

Another useful attribute is title, this works the same as the <img> tags alt attribute. You can use it to create a "tool tip" type popup window that describes where the user will be taken if they click on the link. An example of this is shown below.

<a title="Learn how to design your own Web site" href="http://bucarotechelp.com">Bucaro Techelp</a>

Many people have difficulty linking their webpage to other webpages and media. In this article, you learned how to create relative links from any webpage to any other webpage in a directory structure, even to a specific location in another webpage. Plus you learned about a couple of useful link tag attributes.

Learn more at amazon.com

More HTML Code:
• How to Debug HTML
• What is HTML?
• Using col and colgroup to Apply Attributes to a Table Column
• Aligning an Image on Your Web Page
• Nesting HTML Lists
• How to Troubleshoot an HTML Table
• HTML5 Input Type - URL
• Create a Meta Tag Slide Show - No Java Script Required
• Code For a Basic 2-Column Fluid Webpage Layout
• HTML5 Nav Element