Links in HTML

Tutorial explaining in full detail the nature and usage of HTML links. 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 added to the 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 establish an implicit relationship between the 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 tag may 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 of the times, access by simply clicking on the linked content. The linked content is just the content of the HTML a tag (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 helping 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:

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 tag. In the next example we'll make a link with a piece of document that includes an image and text.

Code	View
<a href="http://www.htmlquick.com/reference/tags/a.html"> <img src="http://www.htmlquick.com/img/links/button.jpg" width="88" height="31" alt="HTMLquick.com logo" /><br /> HTML a tag </a>	HTML a tag

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

When using text as the content of a link (anchor text) there is one thing to take into account: the text must describe briefly (as an HTML title tag must) 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 tag 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 tag reference and the frame-target type.

Extra information

There are many attributes available for the linking tags that may provide crucial information that sometimes (depending on the browser) may not be visual, but can provide a lot of information for other visitors like search engines. These attributes can be used separately or together, depending on the case.

In the example below we define a link that will look exactly like the one in the first example, but will add some information that might result very valuable for search engines.

This way we didn't just provide a link to users that will help them to learn more about the tag, but we also have added this non-visual information about the resource linked: the type of content (see MIME types), the language (see language codes), the character encoding used (see character encoding), and the relationship between this document and the one linked.

To learn more about how to provide extra information in links please refer to the HTML a tag and the HTML link tag reference.

Bookmarks (links within the page)

Bookmarks work exactly as a common link but within the page. They are used to refer to a document and more specifically to a piece of it.

To place a bookmark you only need to insert an HTML a tag with an id or a name attribute (use "id" for Strict XHTML or both "id" and "name" with the same value for compatibility). Example:

Once the bookmark is set, you can refer to it building a link (with the HTML a tag) and using the symbol "#" followed by the name of the bookmark as URI for the "href" attribute. Remember that you can refer to a bookmar as you can refer to a link, using a relative URI (e.g., #bookmark1 or links.html#bookmark1) or the complete URL (e.g., http://www.htmlquick.com/tutorials/links.html#bookmark1). You may have noticed that you can also make a link to a bookmark in another page which will take you first to the page and then to the piece of document bookmarked.

In the next example we'll make a link to a previos bookmark on this page with the title of "The HTML a tag" (with the name of "the-html-a-tag"), so you can see how it works.

E-mail links

E-mail links are an easy to build variation from common links and are useful to point to e-mail addresses. The usual accion performed by browsers in these cases is to launch the e-mail client application present on the system (on the visitor's machine) and automatically prepare an e-mail with the address field already filled. This can result handy to shorten the way to those visitors that actually uses these clients, but as you may note, visitors that don't have such e-mail clients installed on the computer or don't have their e-mail account configured with them will find the link barely useful.

Anyway, this type of links have a special meaning: they point and describe a specific e-mail address, that is semantically different from plain text, and as the address can still be copied and pasted on any other e-mail sender (e.g., web e-mail applications), our recomendation is to use them whenever it's possible.

These links are also built with the HTML a tag with a little variation: the "href" attribute must give the e-mail address after the text "mailto:". In the next example we make a link to the e-mail address of the webmaster of this site:

Warning: According to the HTML standard, e-mail links only accept one e-mail address as content of the "href" attribute, given that the content of this attribute can only be an URL or a mailto URL schema. This exclude any other information that is usually added to e-mail links such as additional addresses, subjects, contents, etc.

The HTML link tag

This type of link defines general relational information for the document, that's usually non-visual in browsers (although may be shown, for example, as tool bar information), but can provide rich information for other interpreters like search engines. For example, the HTML link tag may refer to a document that acts as an index for this document or point to a resource that may be used as a list of style sheets classes.

In the example below we define six tags providing this link information: A document acting as index, the previous and next documents in a sequence, a document providing copyright declarations, an alternate version of the document designed to be printed and a style sheet file containing classes.

Bypass footer options Send to a friend