Looking for the lessons? Get started!
All about HTML links.
The entire Web Design Principles section can be accessed through the menu below.
Unfortunately, not everyone's browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won't display the menu, just click on the button and you'll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.
A chain is no stronger than its weakest link, and life is after all a chain. — William James
Links, or more accurately hyperlinks, are the browser's way of finding and opening Web pages outside of the page currently being displayed. Links operate using URLs, or Uniform Resource Locators. (More accurately, Web addresses are URIs, or Uniform Resource Identifiers. URLs are a subset of URIs, as is the URN, or Uniform Resource Name. You can do more research on the differences between the three on your own, if you care. Most Web tutorials and references use both terms, URI and URL, in their discussions. They are not the same thing, but for our purposes, we can choose convention over accuracy and go with URL, since that's what you will more often see used in reference to hyperlinks.)
This is an image showing the relationship between the three entities.
(Image in the public domain, used on Wikipedia and originally donated by David Torres.)
Moving on:
A URL points to a specific file somewhere on the Web. For example:
http://www.example.com/index.html
The http:// indicates that the file is on the Internet. The second part, www.example.com, tells us the domain name, an identification label for the specific site. (If you're curious to learn more, look up "domain name" and "Domain Name System" on Google.) The third part, index.html, tells us the specific file name. (The file name index.html is considered a default. You can merely point your browser to http://www.example.com and, if the browser is given no further information, it will automatically look for the index.html page. Sites like Yahoo!, or this one, usually have their home page titled index.html and thereby allow users to find their home page without having to type, or link to, the index.html page itself. Nifty little shortcut. Default.htm works also, but that's considered obsolete.)
Types of Links
There are three kinds of links you'll be using in your designs:
- Internal, which are links to anchors on the current page;
- Relative, which are links to other pages within your site; and
- Absolute, which are links to other pages elsewhere on the Internet.
Here are examples of each.
Internal:
<a href="#top" title="top of page">Go to the top of this page</a>
Relative:
<a href="about.html" title="About me">Read all about me.</a>
Absolute:
<a href="http://www.google.com/" title="Google">Search on Google</a>
Internal Links
We created an internal link to the top of our page in on of our lessons. Basically, this allows the site user to "jump" from one part of the page on his/her screen to another.
Like all <a>, or anchor attributes, there has to be TWO of them: the link and something to link to.
Relative and absolute links solve that problem without your needing to think about it much. You can create your about.html page, so it's no problem to link to that page, and the folks at Google were way ahead of you and had that site up long before you started coding.
But with an internal link, you need to create both ends of the link.
It's not too hard. Here's one example, similar to the lesson we did:
<h1 id="top">My First Web Page</h1>
... content ...
<a href="#top">Go to the top of the page.</a>
Basically, we wrapped an unobtrusive id around that <h1> heading to give the internal link — the <a href="#top"> </a> — something to anchor to. The internal link farther down the page, when clicked, lets the user "jump" to the top of the page.
That "hash mark," the #, is the key to making an internal link function properly. That tells the browser to look for a link inside the same page, not somewhere else.
Older tutorials will teach you to use another method, using this format:
<h1><a name="top">heading text</a></h1>
(Note how we nested the tags.)
This method doesn't work in newer versions of Firefox and Opera. It is also considered somewhat dated and obsolete. The id method not only works in all modern browsers, but it saves some bytes by being shorter and tidier, and doesn't add an extra, unneeded element.
Some designers combine the two methods to make sure even the most outdated and obsolete browsers (i.e. Netscape 4) can use the links. Like so:
<h1><a id=top" name="top">heading text</a></h1>
Note: There seems to be some controversy over using internal links. Some people consider the entire practice of providing internal links to be a bit dated, saying that people are used to scrolling up and down a page, and the use of internal links to allow people to "jump" around a page goes against their habit of scrolling. Others say that people like to have those links, and use them when they're provided.
My take is this: If you see a need for an internal link to allow your site users to jump around your pages, by all means, use them. But if you find that you're using five (or ten or fifteen) "back to top" or "back to previous section" internal links, chances are your page is too long and would benefit from being broken up into smaller pages. When you begin getting more proficient at Web design and site maintenance, you'll learn about concepts such as "usability testing" to find out what your site users like to do, and what repels them.
It's also worth noting that the page only jumps directly to the linked element if there's enough room underneath it.
Some older tutorials recommend you create empty links for your "Back to the Top" links:
<a id="top" name="top"></a>
This is obsolete, unsemantic, and just plain wrong. Don't do it!
Relative Links
These links go to other pages in your site. We touched on this in one of the lessons.
These are quite easy to do, and just as easy to foul up, depending on your file structure.
Basically, you just use the filename of the page (or the Word document, or the PowerPoint file, or whatever) in your link:
<a href="about.html" title="About me">About me</a>
Assuming the about.html file is in the same folder as your main page (your "root" folder), clicking that link will bring the "About Me" page up, no muss, no fuss.
If you're using subfolders in your file structure, as you should, you will need to note that in your "file path" in your link:
<a href="subpages/about.html" title="About me">About me</a>
By the way, it's considered courteous, and best practice, to inform the user if you're having him or her open a file other than an HTML page. You can just tell them in a separate paragraph, add a spiffy icon to the link, or whatever works for you.
Root-Relative Links
These kinds of links are similar to absolute links, but are relative insamuch as they refer to the site in which they are contained, not any site on the Internet. Every root-relative link begins from the root of the website, thus telling the browser to begin looking for the site in the root directory. They look like this:
<a href="/index.html">Homepage</a>
Say you want to link to a subsidiary file in your site's directory. You could do it like this:
<a href="/links/coolsites.html">Some cool sites</a>
No matter where your page is in your directory, this kind of link sends the browser right back to the root directory, as long as they remain in the same domain. Author and Web developer Craig Grannell calls the root-relative link "the safest type of link to use for linking to documents elsewhere on a website." Why?
Should a page be moved from one directory to one higher or lower in the hierarchy, none of the links (including links to style sheets and script documents) would require changing. Relative links, on the other hand, would require changing; and although absolute links wouldn't require changing, they take up more space and are less modular from a testing standpoint; if you're testing a site, you don't want to be restricted to the domain in question — you may wish to host the site locally or on a temporary domain online so that clients can access the work-in-progress creation.
If you're going to use root-relative links, you might do well to set a base link in the head of your page:
<base url="http://www.example.com">
Relative links refer to the document in which they reside, so if your document's URL is:
<base url="http://www.example.com/directory/subdirectory/woohoo.html">
then your root-relative links might not work.
I don't like to use this type of link because it sometimes renders it difficult to display pages that I'm working on locally (i.e. on the computer I'm typing this on), and because if you structure your directories and your relative links right, you don't need to do this.
Absolute Links
These are perhaps the easiest links to handle. Basically, you're linking to someone else's site. It's their job to keep their file structure organized and their URLs up to date. You just copy the URL, add the link, and your site visitors are whooshed away to a new site:
<a href="http://www.google.com/" title="Google">Search on Google</a>
Sometimes the links on the other sites are long and incomprehensible. Just copy them and plug them in:
<a href="http://news.google.com/nwshp?hl=en&tab=wn" title="Google">News story on Google</a>
Some older tutorials will advise you to use a method using the target="_blank" value to make absolute links open in separate browsers. They will tell you that it's good for you because it forces the site visitor to stay on your site instead of leaving it by clicking.
I'll give you an example of this method, but I will advise you not to use it, for several reasons. One, it goes counter to an average visitor's expectation of going to a different site in the same browser window. He/she can always go back to your site if desired. Two, it forces the visitor's computer to open another browser window (not a tab, but an entirely new browser). This may not be something the visitor wants to do. Third, as noted, it doesn't open up a new tab in the same browser. In this day of tabbed browsers becoming more and more popular, having multiple browsers — not tabs — is not something people want to see. (I've even seen some designers use this method on relative links. Grrr!)
Having said all that, here's what it looks like. Now don't do it. It isn't best practice.
<a href="http://www.google.com/" title="Google" target="_blank"> Search on Google</a>
Linking to Your E-Mail Address
Again, we touched on this in one of the lessons.
You use the mailto attribute to let the browser know that it's linking to an e-mail address. Not too hard:
<a href="mailto:email@example.com">E-mail me</a>
You can even have their e-mail client add a subject line:
<a href="mailto:email@example.com?subject=adulation">E-mail me</a>
Warning: As I said in the lesson, using this technique to put your e-mail on the Web almost guarantees you a storm of "spam" e-mails. Spammers will "harvest" your e-mail address within minutes of your posting the link, and soon your inbox will be flooded with unsavory spam of all kinds. There are better ways to have users contact you than by using this method. Tizag.com gives us an easy e-mail contact form to use, but as with all HTML forms, it requires you to have at least some access to the server that hosts your site. There are client-side methods that "obfuscate" e-mail addresses, but they are less effective than server-side contact forms.
Using an Image as a Link
Using an image as a link is very simple. Basically, you just insert an <img src> into your link code:
<a href="http://www.example.com/" title="example site"><img src="picture.jpg"></a>
You should note that most browsers automatically add a blue border around images that are used as links. Most of the time, we don't want the blue border. Here's how to get rid of it in your stylesheet:
img {
border: none;
}
Conversely, you can use the border element to add decorative borders around images, if you like. I won't get into any of those methods, but there are plenty of them out there for the Googling.
Linking to Other Files
It's not hard to link to files such as Word documents, PowerPoint or Flash presentations, audio files, and the like. In most cases, clicking the link will automatically trigger the proper program to play the file, or give the user the choice of whether to play, or save (download) the file.
<a href="http://www.example.com/cooltrack.mp3" title="cool song">Cool song</a>
Linking to a song (or whatever) is not the same as embedding a file in your Web page. That's a different topic, and one I won't cover here.
Using Pseudo-Classes to Change the Appearance of Links
Pseudo-classes (sometimes called "pseudoselectors") are similar to classes found in HTML, but they aren't explictly specified in the markup. Rather, we apply them in the stylesheet. (If that doesn't make sense to you right off the bat, don't worry. You'll see how they work as we go.)
The HTML a element actually has four main "states" that can be styled with the appropriate pseudo-classes: :link, :visited, :hover, and:active.
There's a fifth state, :focus, primarily used by folks using the keyboard to navigate through the page. Though it isn't as commonly used, or styled, as the other four, it should be included along with the others. It also isn't fully supported, with Opera ignoring it entirely and Internet Explorer (at least through 7) ignoring the styling but surrounding a focused link with a dotted border.
The format is a bit different from what you've seen before now. Basically, they appear as such:
a:STATE {
attribute: value;
}
with that value usually being a color.
When you use these four link "states" in your stylesheet, you will write them as pseudo-classes. Thusly, you need to include a colon just before the name. Like so:
- :link
- :visited
- :hover
- :focus
- :active
The pseudo-classes need to be included in the order above: L–V–H–A. (Some designers, like Nicole Hernandez, use the LoveHate mnemonic: LoVeHAte.) It really does matter that you put these in the proper order in your stylesheet — because of their order of importance (their "specificity"), putting the pseudo-classes for your links in the wrong order means they do not display properly!
(There seems to be some debate on where to place :focus in the hierarchy. Most of the experts in this article put it either just before or just after the :hover pseudo-element. The new mnemonic, according to Roger Johannson and others, is LoVe's Hurts Fade Away.)
Want an example? Sure you do....
Let's say we want to give each of our link states a separate color. The link will start out as green. When hovered over, it will change to red. When it's active (i.e. when you actually have the mouse key depressed to click into the link), it will change to purple. When it has been visited, it will display as gray. It's certainly a garish enough color scheme, but it will work for our purposes:
a:link {
color: green;
}
a:visited {
color: gray;
}
a:hover, a:focus {
color: red;
}
a:active {
color: purple;
}
A lot of designers, including myself, first learned about pseudo-classes when we wanted to get rid of the browser's default underline for links. You can do that here as well, using the text-decoration attribute:
a:link {
color: green;
text-decoration: none;
}
a:visited {
color: gray;
text-decoration: none;
}
a:hover, a:focus {
color: red;
}
Using this styling gives you a link that lacks an underline until you hover over it.
You can use other styling attributes, such as background colors, boldface, italics, borders, even different font faces, letter spacings, and text transformations, to highlight links. Just remember that a link should stand out from the text so that the user knows it's a link before he or she hovers over it. Links should never be indistinguishable from their surrounding text.
The gurus at WestCiv recommend having a line drawn through a visited link, using the text-decoration: line-through; property. If you did this, your code would appear as:
a:visited {
color: gray;
text-decoration: line-through;
}
You're welcome to do that if you like. I'm not adding it to the example, and I don't use it on my sites, largely because to me, a line through a link says that it doesn't work. That's just my take. My friend Eric Watson of Visibility:Inherit uses line-through styling on his visited links, as do Matthew James Taylor and many other expert designers. I respect Eric, Matthew, and the WestCiv people, so I've noted this. You decide what you like for yourself.
It's also worth noting that many accessibility experts frown on changing the link colors from their default state of blue, red, and purple, mainly because it's become such a familiar sight on Web pages that people seeing such unstyled links recognize them as links right off. Some accessibility gurus even say that you should not remove the underline from the links. I don't agree with this, but I do agree that links should be styled differently from their surrounding text in order to stand out. In this site, with its color scheme of grays and oranges, I've styled the links to appear as orange until you hover over them, when they turn gray to match the text and acquire a dotted (i.e. subtle) bottom border to make them stand out. Between those color/border selections, and the title "tooltip" that appears when hovered, I believe I've made the links quite obvious. At least I hope I have.
Note: Many designers still use an all-inclusive styling for the a: element:
a {
color: red;
}
This styles all the a: selectors until overwritten by later stylings. This can come back to bite you in your designs. Moreover, the a: stylings applies to all anchored elements, while the a:link stylings only applies to the a href HTML tags. It's better to use the a:link styling, but then you must style the a:visited, a:hover, a:focus, and a:active selectors as well.
Combining Multiple Pseudo-Classes
Just to make it that much more interesting, you can combine, or "chain," your pseudo-classes. If you want to have one particular color on your link's hover state, but have it display a different color on hover after it's been visited, you can do this:
a:visited:hover {
color: black;
}
Links Opening in New Browser Windows
This is an obsolete usage: we don't do this any more. Some designers get so worried about the number of page visits that they don't want to let a site visitor leave. Clicking an external link in your page usually has your site "disappear," overlaid by the new site. Your site visitor may get interested in whatever is on that new site, and forget about you. But you want him to stay so bad that you force him to open a new browser window — not tab, window — when clicking on that link.
This is definitely not best practice. I'll show you how to do it, because a blue million obsolete or hardheaded tutorials will show you, but there are reasons why you shouldn't do it. I'll share those with you in a moment.
Visit this <a href="http://www.aliensite.com" target="_blank">alien site that's not part of my site.</a>
The target="_blank" value is what makes this function. However, we don't do it. Why not? One, usability studies show that most site visitors become annoyed when clicking on a link makes a new browser window open. In "technical" terms, it goes against conventions. Secondly, it opens a separate window — a second instance of the browser — and not a tab. In these days of tabbed browsing and multiple programs running at once, forcibly opening another browser often goes against what the user expects or wants. Sometimes that extra browser being opened is enough to slow a user's computer, or even make it crash. Thirdly, forcibly opening a new window is perilously close to the land of "pop-ups," and nobody likes those.
