Links

If HTML is the foundation of the web, links are road signs. You can take a user anywhere, to any other page, resource, or even places on the same page, using a link.

Making a link

A link uses the <a>, or anchor, tag. It requires one attribute, href, which is how you tell the browser where the link will lead. The text between the opening and closing tag is what will be displayed as the link text.

<a href="http://archives.somnolescent.net/web/tesserae_v1/">Tesserae</a>
Which appears as:
Tesserae

A handy tip is how to make links open in a new tab: add target="_blank" as another attribute in your link, and it will open in a new tab, or in older browsers, a new window. I like these for external links, or links that go to other sites.

<a href="http://archives.somnolescent.net/web/tesserae_v1/" target="_blank">Tesserae (will open in a new tab)</a>

Relative versus absolute links

There's two kinds of links, relative links and absolute links. They require a bit of explanation about folders and file names, but it's an important distinction.

A relative link points somewhere using the current page as the starting point. You generally use this to link to items on your site. For example, in Tesserae's folder structure, links.html (the page you're on) is in the same folder as semantics.html. Thus, to link to semantics.html, all you need is to point at that file:

<a href="semantics.html">Semantics - From Tesserae</a>

Meanwhile, if I wanted to point at one of my CSS pages, I would list the folders in the path required to get to it.

<a href="../../css/basics/colors.html">Colors: Primary, Background, and "Web-Safe" - From Tesserae</a>

The .. means "go to the folder the current one is in". This link hops up to html, hops up to the top of the site, goes into the css folder, goes into the basics folder inside it, and then links to colors.html.

Absolute links point to a full URL, domain and all. You generally use this to link to items on other sites.

<a href="http://www.gryphel.com/c/minivmac/">Mini vMac—a miniature early Macintosh emulator</a>

Summary:

  1. To make a link, use the <a> tag. Its one required attribute, href, points to either a file or another page.
  2. The link can either be a relative link, which points somewhere locally by just listing out folders and then the file name, or an absolute link, which points directly to a resource, domain and all.

Further reading