This is the anchor tag: < a >

Retrospectively speaking, the < a > tag may be the most significant of all HTML elements. Why so remarkable? Because that little lower case a created the hyperlink, and established the inherent distinctive value of the web. Why else would Fonzie make it his catchphrase?

In the nineties, when you had the prefix “hyper” tacked on to something, chances were that no matter what it was, it was bound to be pretty darn cool. Color-changing t-shirt? Hyper! Small-city-sized-discount-store? Hyper! Noncompliant medicated pre-teens? Hyper!

Unfortunately, most of these didn’t make an effective transition into the 21st century. But the link, having wisely dropped the “hyper” forsaking its Day-Glo tinged past, remained an integral part of the World Wide Web, and established the framework for how people interacted and moved about web pages. Today, this is mostly taken for granted, but at the time of conception, it was a truly groundbreaking idea. Without it, the Internet would have likely looked like one giant disengaged BBS system, and you and Charlie wouldn’t surf.

But the term anchor sure seems a little counterintuitive, no?

My you’re attentive! In the early days of the web, a page was more likely to be in the form of an ancient parchment scroll than a modern magazine or newspaper. Content was often just tacked on the to the original HTML page, resulting in a rather long and unwieldy document. New information was likely to appear at the bottom of a web page rather than the top, and the < a > tags were an attempt to re-direct the user to a certain point in the page, rather than a different page entirely. You’d click on a link, and it would (Hyper!) transport you to a different area of the document. The anchor was a predefined point in your document where you could be transported. And that (somewhat misguided) legacy remains to this day.

The < a > element today is rarely used in such as fashion, although it’s still fully capable of such utility, if you’re so (masochistically) inclined. Here, we’ll be focusing on its more acceptable usage as a link to another page, or more specifically, another local page within a web site.

< a > Formatting Syntax

Traditionally, the < a > tag was limited to what was called an inline element, but with HTML5, you’re allowed to wrap a link around an entire block on content, if you wish. Whatever content is placed within the tags becomes actively linked to the address specified within the href attribute.


The href stipulates where the active link should re-direct to once clicked. This may be stated as an absolute path or a relative path. Looks like we’re going to need a quick primer… An absolute path includes all related location information, and assumes nothing. Every time you manually enter an address into your web browser, you are referencing the page as an absolute.
A relative path references the link relative to the location of the page you are currently on, and the directory that you are in. If all of the pages for your website are in the same folder, you can reference the location by just using the name of the html file.

As long as the page you are linking from and the page you are linking to are in the same directory, a relative path will be sufficient to create a proper link. You may also treat other folders as relative to your linking page’s location. For instance, let’s assume that all of the files for The Web Made Easy are located in a folder named “WWW”. Our index.html page, or the page that is loaded when a user types in is located within that directory, and all other pages are placed in category folders, such as “web design” or “programming”. We can therefore treat the “WWW” folder as a root location, and refer to other pages relative to that location.

It’s out of the scope of this tutorial to go more in-depth about absolute vs. relative paths (and frankly, it’s a very dry discussion), so if you’re still unsure, I recommend finding one of the numerous explanations out there written by people far more patient than myself. Now that’s we’ve got that (kind of) cleared up, let’s create an HTML page with the following sample content:

Then, make the following modifications to the content within our < nav > element:

If you save your page, and open in your web browser, you’ll now see that you