HTML and CSS

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.

An absolute address example

http://www.domain.com/dir/page.html

Relative linking means linking to files associated on the same server files 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: abc.html.

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

You can move up from a directory into another: ../dir/abc.html.

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

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.

Example: Linking to an absolute address

<a href="http://www.domain.com/dir/def.html">It is a sample page</a>

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.

Example: Adding the title attribute and value

<a href="http://www.domain.com/dir/def.html" title="It is the sample page
of HTML and CSS example">Sample Page</a>

As the mouse passes over the link, a ToolTip appears along with the additional details.

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="def.html" tabindex="2">. . .</a>.