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).
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 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:
| Code | View |
|---|---|
| The <a href="http://www.htmlquick.com/reference/tags/a.html">HTML a tag</a> explained |
The HTML a tag explained |
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).
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.
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.
| Code | View |
|---|---|
| Learn more about the <a href="http://www.htmlquick.com/reference/tags/a.html" type="text/html" hreflang="en" charset="utf-8" rel="help">HTML a tag</a>. |
Learn more about the HTML a tag. |
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.
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.