Tags for this article: html, links, relationships, tutorial
A tip for HTML beginners: the element we are describing here has nothing to do with normal, clickable links inside an HTML file. Such links are described in a separate chapter.
The possibilities described on this page do belong to the stone age of HTML (1995), and are unfortunately not supported by all popular browsers today. Nonetheless, they offer one the amazing possibility to explicitly declare internal hypertextual dependencies of an HTML file, such as the previous or next page, or the sub-page and more. Search services or software can then produce entire “Site maps” of your HTML project, as in graphical representations of the site’s layout.
Web browsers should, if you find such tags in an HTML file, display a button or similar user element for the tags. By clicking the buttons, the user should be able to jump to the linked destinations. Microsoft has yet to adopt this reasonable navigation possibility, while other browsers, such as Opera, have long used it. Firefox has economised the navigation possibility with an individually installable extension (Firefox Add-ons).
You can write tags such as home page, index, glossary, help, first, previous, next, last and so on for every HTML file. However, you can also only use the tags you require. The following example shows link elements defined for this page.
<head>
<link rel= “author” title= “About Us” href= “http://www.html.co.uk/about”>
</head>
Explanation:
With <link rel you introduce a logical file relationship. Afterwards the type of file relationship follows. The following are recognised attribute values:
rel= “contents” relates to the contents.
rel= “chapter” relates to the chapter.
rel= “section” relates to the section.
rel= “subsection” relates to the sub-section.
rel= “index” relates to the index.
rel= “glossary” relates to the glossary.
rel= “appendix” relates to the appendix.
rel= “search” relates to the search function.
rel= “author” relates to the author.
rel= “copyright” relates to the copyrights.
rel= “next” relates to the next file in the “guided tour”.
rel= “prev” relates to the previous file in the “guided tour”.
rel= “first” relates to the first file in the “guided tour”.
rel= “last” relates to the last file in the “guided tour”.
rel= “up” relates to a higher level chapter page in the domain.
rel= “top” and rel= “start” relate to the starting page or home page.
rel= “help” relates to the help section.
rel= “bookmark” relates to a general point of orientation.
rel= “stylesheet” relates to a file with style definitions that are used to display the site.
rel= “alternate” relates to files with the same content as the current site, but in a different document version.
rel= “alternate stylesheet” relates to a file with alternate style definitions, which can be used for displaying the site if the user so wishes.
rel= “shortcut icon” relates to the icon shown for the site in the favourites.
You can also write multiple link elements with the attribute values chapter, section, subsection, appendix, bookmark, alternate, stylesheet, and alternate stylesheet if desired.
The href attribute serves to ensure where link with a destination should lead to. The same rules apply with value allocation as with regular links.
You can define the caption used by the browser when displaying the link button with the title attribute. The information should describe the link destination.
The following possible attributes inside a <link> tag are:
media for determining the export medium.
target for information on the destination window, that the link should direct to. With frames it can be one of the defined frame windows. But a reserved window name can also be entered: target= “_blank” opens the link in a new browser window, target= “_top” opens the link in the entire browser window and prevents the display of all eventually displayed framesets, while target= “_parent” opens the link in an upper level frameset and frees the display from the inner frameset.
hreflang allows you to enter the link destination site’s language using the language abbreviations.
charset allows you to specify the encryption the link destination uses.
The link element can also have universal attributes.
Take Note:
Next to the effects of the link elements in HTML, there are also additional elements that serve to define certain downloadable fonts.
An example:
<link rel= “fontdef” src= “http://www.meine.com/fonts/chianti.pfr”>
That way you define the font called chianti.pfr inside the HTML file. We will examine the topic of downloadable fonts more closely in a separate section.
If you work in XHTML standard, then you must write the link element as content less. Write the standalone tag in the <link … /> form to do so.
Backtracking Relationships
Backtracking relationships are envisioned for “bidirectional” relationships between two HTML files. This is the case if document A links to document B and B also links to A, if both are logical linking targets for the other.
Just like the logical file relationships, backtracking in button form should also be possible, although the main browsers remain silent on this option. Search engines can reach interesting conclusions regarding a project’s hypertext structure with backtracking relationships.
An example from file_1.htm:
<head>
<link rel= “alternate” href= “file_2.htm” title= “second reading method”>
</head>
An example from file_2.htm:
<head>
<link rev= “alternate” href= “file_1.htm” title= “first reading method”>
</head>
Explanation:
With <link rev you introduce a backwards relationship. Otherwise the functionality is identical with <link rel used for the logical relationships to other sources. The same attributes are also possible. In the example above you can see how two HTML files, whose supposed content concerns the same topic from different points of view, can logically be linked with one another through backtracking.