Semantic Linking with the link Element
| < Day Day Up > |
Syntactically, a link to another document created by an anchor says nothing about the relationship between the current document and the object being pointed to. You can use the title attribute to provide advisory information about the link so that the viewer of a page can associate meaning with a link. The linked image or text also might give some clue about what happens when the link is selected, but in HTML itself, links lack any semantic meaning. The link element, however, does provide a way to define the relationship between linked objects. The concept of the link element is that a document might have predefined relationships that can be specified, and that some of these relationships might be useful to a browser when offering navigation choices, rendering a page, or preparing a page to be printed. Although <link> tags have been around for several years , until recently, few browsers have supported them. However, with the rise of style sheets and even a few proprietary browser features, <link> finally is being used.
The link element is found in the head of an HTML document, where it might occur more than once. The two most important attributes of the element are href and rel . Like the href attribute for an <a> tag, the href attribute for a <link> tag specifies the URL of another document, whereas rel specifies the relationship with that document. The value of rel often is called the link type . The basic XHTML syntax of the link element is <link href="url" rel="relationship" /> . Under HTML and XHTML, <link> also supports a reverse semantic relationship, indicated by the rev attribute, as well as the title attribute, which can be used to set advisory information for the link. The most mysterious aspect of the link element is the value of the rel and rev attributes.
Link Relationships in Detail
Like the rel attribute for the a element, the rel attribute for link defines the relationship between the current document and the linked object. The value of the rel attribute is simply a text value, which can be anything the author desires. However, a browser can interpret standardized relationships in a particular way. For example, a browser might provide special icons or navigation features when the meaning of a link is understood . Currently, no standard set of document relationship values exists, but the HTML 4.01 specification lists some proposed relationship values, as shown in Table 4-9. Note that these values are not case-sensitive.
| Relationship Value | Explanation | Example |
|---|---|---|
| alternate | The link references an alternate version of the document that the link is in. This can be a translated version of the document, as suggested by the lang attribute. | <link href="frenchintro.html" |
| appendix | The link references a document that serves as an appendix for a document or site. | <link href="intro.html" |
| bookmark | The link references a document that serves as a bookmark; the title attribute can be used to name the bookmark. | <link href="index.html" |
| chapter | The link references a document that is a chapter in a site or collection of documents. | <link href="ch01.html" |
| contents | The link references a document that serves as a table of contents, most likely for the site, although it might be for the document. The meaning is unclear. | <link href="toc.html" |
| index | The link references a page that provides an index for the current document. | <link href="docindex.html" |
| glossary | The link references a document that provides a glossary of terms for the current document. | <link href="glossary.html" |
| copyright | The link references a page that contains a copyright statement for the current document. | <link href="copyright.html" |
| next | The link references the next document to visit in a linear collection of documents. It can be used, for example, to pre-fetch the next page, and is supported in some browsers such as MSN TV and Mozilla-based browsers. | <link href="page2.html" |
| prev | The link references the previous document in a linear collection of documents. | <link href="page1.html" |
| section | The link references a document that is a section in a site or collection of documents. | <link href="sect07.html" |
| start | The link references the first document in a set of documents. | <link href="begin.html" |
| stylesheet | The link references an external style sheet. This is by far the most common use of <link> and the most widely supported in browsers. | <link href="style.css" rel="stylesheet" /> |
| subsection | The link references a document that is a subsection in a collection of documents. | <link href="sect07a.html" |
| help | The link references a help document for the current document or site. | <link href="help.html" |
Under Mozilla 1.0 and greater browsers as well as Opera 7 and greater browsers, these link values are finally starting to be recognized. For example, given the following simple example,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title> Link Relationship Tests </title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <link rel="home" href="http://www.htmlref.com" title="Homepage" /> <link rel="toc" href="http://www.htmlref.com/overview/toc.html" title="Table of contents" /> <link rel="help" href="http://www.htmlref.com/help.html" title="Need help?" /> <link rel="up" href="../index.html" title="Chapter 4" /> <link rel="copyright" href="http://www.htmlref.com/copyright.html" title="Copyright statement" /> <link rel="author" href="mailto:tpowell@pint.com" title="Mail the author" /> </head> <body> <p> Just a test of link relationships </p> </body> </html>
you would see the menu items in Opera 7 and Mozilla, as shown in Figure 4-10.
Figure 4-10: Browser support for <link> rendering
| Tip | Under Mozilla, you may have to turn on the preference to show semantic links. Under most 1.x versions of Mozilla, this was found at View Show/Hide Site Navigation Tool Bar Show Only As Needed. |
In addition to the HTML 4.01 proposed relationships, various other relationships are possible. In fact, document authors can make up their own relationships if they desire , but should be careful to avoid the listed values, as they may hold special meaning for browsers.
<link> and Style Sheets
A variety of attributes are defined for the link element including type , media , and target . These new attributes are already supported for handling cascading style sheets. The link element allows a style sheet for a document to be referenced from a separate file. If the markup code <link rel="stylesheet" href="corpstyle.css" type="text/css " /> is inserted in the head of an HTML document, it associates the style sheet corpstyle.css with the current document. The rel value of stylesheet indicates the relationship.
The alternate stylesheet relationship, which would allow users to pick from a variety of styles, also is defined. To set several alternative styles, the title attribute must be set to group elements belonging to the same style. All members of the same style must have exactly the same value for title . For example, the following fragment defines a standard style called basestyle.css, and two alternative styles, titled 640x480 and 1024x768, have been added; these refer to style sheets to improve layout at various screen resolutions :
<link rel="alternate stylesheet" title="640x480" href="small.css" type="text/css " /> <link rel="alternate stylesheet" title="1024x768" href="big.css" type="text/css" /> <link rel="stylesheet" href="basestyle.css" type="text/css " />
A Web browser should provide a method for users to view and pick from the list of alternative styles, where the title attribute can be used to name each choice. At the time of this writing, this alternative choice for style sheets is supported primarily by Mozilla- based browsers.
Because the potential exists for many different kinds of linked objects, the type attribute was added to the link elements in the previous example to indicate the data type of the related object. This attribute can be especially helpful when used to indicate the type of style sheet being used because other style sheet technologies do exist. For style sheets, type usually takes a MIME type, which indicates the format of the style sheet being linked to.
The media attribute is also new for the link element, but it isn't widely supported beyond printer style sheets. For style sheets, this attribute would indicate what type of media the style sheet should be used with; the same document could thus reference one style sheet when viewed on a computer screen, one on a PDA, and a different style sheet when being printed. The browser then is responsible for filtering out those style sheets that aren't appropriate for the current environment. The following code fragment shows an example of this idea:
<link rel="stylesheet" media="print" href="print.css" type="text/css" /> <link rel="stylesheet" media="screen" href="screen.css" type="text/css" />
A variety of values have been proposed for the media attribute including print , projection , screen , braille , aural , tv , and all . When not specified, all would be the default type, suggesting that the style should be used in all output environments. More attention will be given to CSS and its relationship with the <link> tag in Chapters 10 and 11.
Advanced Browser Support for <link>
Mozilla and MSNTV browsers have used <link> to improve performance. If the rel attribute is set with the value of next (or in Mozilla prefetch as well) and an href is specified, the browser will "pre-fetch" the page or object in question during the idle time of the browser. If the content of the next page is stored in the browser's cache, the page loads much faster than if the page has to be requested from the server.
In the case of Mozilla, which is far more common than MSN TV, the browser looks either for a <link> tag or an HTTP Link: header with a relation type of either next or prefetch . For example, we might use <link> like this:
<link rel="prefetch" href="/images/product.jpeg" />
This would be the same as providing a prefetching hint using an HTTP Link: header:
Link: </images/product.jpeg>; rel=prefetch />
The Link: HTTP header can also be specified within the HTML document itself by using a <meta> tag:
<meta http-equiv="Link" content="</images/big.jpeg>; rel=prefetch" />
It is possible to prefetch a variety of objects in a page during a browser's idle time. Consider the following example:
<link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css" /> <link rel="prefetch" href="bigflash.swf" /> <link rel="next" href="2.html" />
While prefetching seems to be unique to Mozilla and MSN TV, it is not. Through the use of JavaScript or ActiveX controls, it is possible to prefetch page objects. We'll see in the next chapter that even the simple idea of loading an image with height and width set to 1 so that the loaded image is a barely perceptible dot to the user can be used to simulate the idea of prefetching. The idea here is that because these images are loaded into the browser's cache they will be available for subsequent pages, regardless of if they are shown at their natural size . Be careful though to make sure that the preload of images is controlled with a script or the <img> tags are used at the bottom of a Web page so it doesn't disrupt the load of the more visible images on the page.
Now that we have discussed cutting edge browser ideas, let's go even farther and consider some of the theoretical limitations of linking on today's Internet before concluding the chapter.
| < Day Day Up > |
EAN: 2147483647
Pages: 252