What's New Tutorial Index References RSS Feed Contact

Links

Links are the way the web becomes the web, by connecting together pages, resources like sound and pictures, other sites, and even other places on the same page. Just about anything you can access in a web browser can be linked to.

Making a link

To make a link, use the a, or anchor, element. It requires a single attribute, href, which points the browser to the URL of a resource or other pages. Whatever is put between the opening and closing tag of the element will become the clickable part of the link. Usually, this means text, but you can make images and even div elements clickable in this way.

Tesserae is a web design site with a different focus. <a href="http://tesserae.somnolescent.net/">Visit Tesserae</a> with this handy link.
Tesserae is a web design site with a different focus. Visit Tesserae with this handy link.

Relative and absolute links

You might be wondering, if you're linking around your site, if you have to include your site's full URL in every link. The answer is no, thankfully. Links can either be made relative, where they'll point to a resource from the perspective of the current page, or absolute, where an exact location for said resource is specified.

The distinction might get a little confusing, so here's a visual for clarification:

A sample site filetree
A file tree showing something like what your site might look like.

We have a few raw HTML pages, a folder for images, and a folder for miscellaneous text files. Note that the name of the folder this is all in is called archives. If your browser is on any of the HTML pages inside archives, you don't need to use the full URL when something else resides inside the same folder. You can simply link to, say, images/tapes.jpg, and the browser will know to go into the images folder and look for a tapes.jpg. This is a relative link, named for the fact that where the link goes depends on what page the browser is currently looking at. Relative links have the advantage of being cleaner to work with and will work on the local (on your computer) copy of your site, if you happen to be building it offline.

I have <a href="images/tapes.jpg">a huge collection of VHS tapes in my basement</a> I need to digitize.

If you want to go up a directory, you can use .. in your relative link. If you're in, say, archives/textfiles/march2000.html and you wanted to link to archives/about.html, you can use ../about.html for your path:

If you're not sure who I am, you can read more about me <a href="../about.html">on my about page</a>.

The other type of link is an absolute link. Absolute links use the full URL (like http://tesserae.somnolescent.net/basic/html/links/filetree.svg) to point the browser directly to a resource. Absolute links are most commonly used to point to other sites. Using them for bits of your own site isn't recommended, as if any part of the URL changes (say, if you switch domains), the link will no longer work.

<a href="http://www.retro-daze.org/site/article/id/9435">This article on weird VHS tapes</a> is a neat read.

Summary:

  1. Anything you can visit in a web browser can be linked to: pages, pictures, documents, other sites, and even other places on the same page.
  2. To make a link, use the a element.
    • The href attribute is used to point to where the link goes.
    • Whatever is in between the opening and closing tags will be used for the clickable part of the link. Put text between for clickable text, an image between for a clickable image, or get adventurous and try other elements.
  3. Links can either be relative, where they point to resources on the same server and maybe in the same folder, or absolute, where they point to a full URL.
    • Relative links are best used for other parts of your site, as if you switch domains, the links will still work. They'll also work as you test on your computer.
    • Absolute links are good for linking to other sites.

Further reading