HTML commands for links

The real power of HTML is its ability to link to other documents and pieces of text, images, video or audio. Links are usually highlighted or underlined in a document so that you know of their existance. Clicking on the link opens up the document for viewing.

Linking to other documents

To link to a file on a Web server, your HTML tag would look like:

<a href="http://www.ncsu.edu/">Welcome to NCSU</a>

The text that appears between the beginning and ending tags ("Welcome to NCSU" in the above example) is the text that is the link the reader clicks on to go to that URL.

When you make a link, imagine you're creating two anchor points: one exists in your document (the text to click on), while the other is the document to which you're linking. You basically create a thread between two points.

Here are what the parts mean:

<a                    -- starts the anchor
href                  -- stands for "hypertext reference"
http://www.ncsu.edu/  -- the URL of the other document
Welcome to NCSU       -- the text that will appear and be clickable
/a>                   -- ends the anchor

As long as you know the URL for a file, you can create a link to it.

Linking to a named anchor

Anchors within the same document

To link to a specific section within the same document, you must define an anchor name inside the document and then link to it. For example, if you were linking from the top of a document titled "chapter2.html" to the fourth paragraph of this same document, you'd give the fourth paragraph a name (any name, you make it up), in this case "important," and you'd create a link to this name instead of a URL.

Continuing on with the above example. We are creating a link from the top of "chapter2.html" to the fourth paragraph; we are going to call this link "important". First, you would define the name "important" in the fourth paragraph with the name tag

<a name="important">First sentence in fourth paragraph</a>

Next, create the link to this "important" anchor (at the start of "chapter2.html"). It would look like:

<a href="#important">link to important stuff</a>

The pound sign in front of the anchor name tells the browser to look for the link inside the document already loaded instead of looking elsewhere in another file.

Note that anchor names are case sensitve, and that some kind of non-blank text must appear in the named anchor tag.

Named anchors within another document

There may be times when you not only want to link to a specific document, but more precisely, you want to link to a particular section of that other document. As an example, suppose you wish to set up a link from the document "Our first HTML document" to a particular section in a second document called "chapter2.html".

First, you set up a named anchor in the document you are linking to (chapter2.html). To do this, go to the section in your second document where you want the reader to begin and define a named anchor. Name this anchor "important". Insert the following tag in the appropriate place in the second document:

<a name="important">some text</a>

Now to create the link in your first document. In your first document you need to include not only the file name, but the name you defined for the anchor. This named anchor is separated from the file name by a pound sign (#). Place this tag where you want the link to show up (the highlighted text).

 <a href="http://www.here.edu/chapter2.html#important">important
part</a>

A user would see that the first document has the words "important part" highlighted. Clicking on this highlighted text would take them to the "important" section in the second document.

Absolute and relative linking

If a new neighbor you just met on the street asked you where you lived, you wouldn't give them your complete postal address. You'd say something like "two houses down on the left." Your postal address is your "absolute" address -- anyone can find you using the information it provides. The information you gave to your new neighbor is your "relative" address -- just enough information to locate your house from where you were standing.

The same concept works with URL addresses. When linking from one document to another in the same directory, only the second document name is necessary, not the entire URL. For example

<a href="second_doc.html">Go to next page</a>

You can also link across directories to a document by relative position. For example

<a href="../third_doc.html">Go to third page</a>

links to a document in one directory hierarchy higher than the current document.

Relative links are strongly encouraged as they are easier to type and allow you to move groups of files from one machine to another without editing the files at all. Naturally though, relative linking becomes more and more dangerous the more directories you traverse. With that in mind, it's usually best to use relative linking only within files that are part of a single project (such as this HTML tutorial).

Return to Table of Contents