The Good Old Link

The Good Old Link

Without the link, the Web would simply not exist. It's the heart and soul of the Web and, as such, should be treated with kindness!

Linking is easy to accomplish, but there are a few important issues to discuss when it comes to linking. Before you get to the code, I want to offer a little insight into two primary types of linking: absolute and relative.

Absolute linking is using the exact address to the file you'd like the link to point to. This means including the domain, any subdirectories, and the filename (see Example 2-9).

Example 2-9. An absolute address example

http://www.molly.com/books/springboard.html

Relative linking means linking to files associated on the same serverfiles that are in the neighborhood, so to speak. You can link a document to another document in the same directory simply by using its filename: springboard.html.

Or, if it's in a subdirectory, you use the subdirectory: books/springboard.html.

You can move up from a directory into another: ../books/springboard.html.

And on some servers, you can use a global identifier to signify "wherever this document is found on this server": /includes/springboard.html.

Beware: Links in Blogs and CM Although most people advocate always using relative linking when working with documents on the same server, this isn't always the best option. Blogging tools and content-management systems (CMS) generate archives. That means relative references might become unusable in the archive file, which is found somewhere else than the original file. Because of this, I suggest using absolute linking in those cases.

In the link samples coming up, you'll see me use a range of absolute and relative linking.

Standard links are generated using the anchor element <a>. . .</a>. The hypertext reference attribute (href) is used to denote the link address, and text content within the opening and closing tags will appear as linked text (see Example 2-10).

Example 2-10. Linking to an absolute address

<a href="http://www.molly.com/books/aw.html">Read about HTML and CSS</a>

Figure 2-9 displays the results.

An important concern involves links and accessibility. To make links more accessible to those with disabilities, you can add attributes that provide additional cues to those individuals. The title attribute is very helpful to use. Here, you'll add the attribute and a more detailed description of the link (see Example 2-11).

Example 2-11. Adding the title attribute and value

<a href="http://www.molly.com/books/springboard.html" title="read about the upcoming book
 from Addison-Wesley covering HTML and CSS">Read about HTML and CSS</a>

As the mouse passes over the link, a ToolTip appears along with the additional details (see Figure 2-10).

Another important attribute for link accessibility is tabindex, which enables you to denote links in a custom, specific sequence for those individuals who are tabbing instead of clicking through the page.

So if you wanted a link to be the second most important link on the page, you would give the link a tabindex value <a href="springboard.html" tabindex="2">. . .</a>.