Links in HTML

This tutorial explains in full detail the nature and usage of links in HTML. It will not only show the basic syntax of links, but will also go through various characteristics that are usually not used and can provide a lot of hidden information for different interpreters (e.g., search engines).

Links are a vital part of HTML and the whole concept of World Wide Web. Internet is considered a web becuase of how links connects separated pieces or documents, based on the idea of a simple reference improoved with interactivity. As result, a simple click takes you from the referring document to the one mentioned in the link.

A link in HTML documents can be basically considered as a reference to other resource. This reference establishes an implicit relationship between the referring document and the resource linked. Links can be classified as visual (placed in between the document's content) or hidden (defining general relational information).

The HTML a tag

The HTML a element can be used to insert links inside the content of a document. This may help authors to recommend other resources related to the actual topic that users can, most times, access by simply clicking on the linked content. The linked content is just the content of the HTML a element (i.e., the piece of HTML code that's placed between the start and end tags). Note that links are usually rendered in a different way by browsers to help users to recognize them.

There are many ways to build a link, but a basic link must contain at least a content and the address of the resource (defined with the "href" attribute). In the example below we'll define a basic link:

Note: to learn more about how to locate and organize resources please refer to our "Organizing a website" tutorial.

In the example above we made a simple link using text as content, but you can actually link almost anything using the HTML a element. In the next example we'll make a link with a piece of document that includes an image and text.

HTML a tag

Note the closing " />" used in empty tags to achieve XHTML compatibility.

When using text as the content of a link (from now on, we'll referer to this text as "anchor text") there is one thing to take into account: the text must describe briefly (as the HTML title element) the content of the resource linked. This is a thing left to each author consideration, but using descriptive anchors may provide with information to users and search engines (very important when promoting a site).

Another thing to consider is that when linking to a folder (not a file, e.g., http://www.htmlquick.com) you should always add a trailing slash to the URL (e.g., http://www.htmlquick.com/). Even when most browsers or servers automatically solve this problem is a good practice that will add to the properness of your coding.

The target attribute

The target attribute allows authors to decide where the resource linked through the HTML a element must be loaded (e.g., it can be loaded in a new browser's window, in a specific frame if there is a frame set page or simply in the same window). This may result useful sometimes but also makes your code not compatible with Strict XHTML code. If you really want to use it you'll need to opt for a Transitional DTD (in the HTML !DOCTYPE tag).

In this simple example, we show the code for two links: the first is opened in a new window and the second in a frame named "main".

To learn more about the "target" attribute, please refer to the HTML a element reference and the frame-target type.