The link element defines document relationships and is underused in terms of what it can offer your site visitors. In the final article in the series “From the Top” I take a look at this element to explain and demonstrate its usefulness.

• The Link Element
• Link Attributes
• Using Document Links
• Conclusion
• References

The Link Element

The link element defines a link much the same way as the a element but can only be used in the head of a document. The link element can be used as many times as required. It does not have content but rather confers relationship information that user agents can expose to a site visitor through a toolbar.

• Naturally, Internet Explorer 6 and less doesn’t provide this functionality — does IE7?
• Firefox 1.5 (with the cmSiteNavigation extension).
• Opera (View — Toolbars — Navigation bar).
• Mozilla 1.7.3 and SeaMonkey (View — Show/Hide — Site Navigation Bar).

Link Attributes

There are a number of attributes allowable and you can even define your own to build a document link.

• rel
• rev
• href
• hreflang
• charset
• type
• media

At a minimum, you’ll be using rel or rev, href and title for your document links. The rel attribute specifies a forward link and the rev attribute specifies a reverse link. Both share a common list of values that can be summed up no better than how the World Wide Web Consortium (W3C) have already done:

Alternate

Designates substitute versions for the document in which the link occurs. When used together with the lang attribute, it implies a translated version of the document. When used together with the media attribute, it implies a version designed for a different medium (or media).

Stylesheet

Refers to an external style sheet. This is used together with the link type “Alternate” for user-selectable alternate style sheets.

Start

Refers to the first document in a collection of documents. This link type tells search engines which document is considered by the author to be the starting point of the collection.

Next

Refers to the next document in a linear sequence of documents. User agents may choose to pre-load the “next” document, to reduce the perceived load time.

Prev

Refers to the previous document in an ordered series of documents. Some user agents also support the synonym “Previous”.

Contents

Refers to a document serving as a table of contents. Some user agents also support the synonym ToC (from “Table of Contents”).

Index

Refers to a document providing an index for the current document.

Glossary

Refers to a document providing a glossary of terms that pertain to the current document.

Copyright

Refers to a copyright statement for the current document.

Chapter

Refers to a document serving as a chapter in a collection of documents.

Section

Refers to a document serving as a section in a collection of documents.

Subsection

Refers to a document serving as a subsection in a collection of documents.

Appendix

Refers to a document serving as an appendix in a collection of documents.

Help

Refers to a document offering help (more information, links to other sources information, etc.)

Bookmark

Refers to a bookmark. A bookmark is a link to a key entry point within an extended document. The title attribute may be used, for example, to label the bookmark. Note that several bookmarks may be defined in each document.

Link types are case-insensitive and you may also use additional types outside of the specification although you should use a profile to cite the convention for defining the link type.

The remaining attributes further define the linked document.

• The base language and charset of the resource identified by the href value (hreflang and charset respectively).
• The MIME type (type) can be included as an advisory hint to provide a fallback mechanism for the user agent when viewing a page offline rather than from a server request.
• The media attribute is used when linking to style sheets and specifies the intended destination medium for the style information. The default value is screen but it may be a single descriptor or comma-separated list. It is popular to mark style sheet links as “screen, projection” for example so that Opera will use the style sheet in full screen mode. By specifying the intended rendering medium you may save the user agent from downloading unnecessary style sheets.

The full list of media descriptors includes:

screen

Intended for non-paged computer screens.

tty

Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities.

tv

Intended for television-type devices (low resolution, colour, limited scrollability).

projection

Intended for projectors.

handheld

Intended for handheld devices (small screen, monochrome, bitmapped graphics, limited bandwidth).

print

Intended for paged, opaque material and for documents viewed on screen in print preview mode.

braille

Intended for braille tactile feedback devices.

aural

Intended for speech synthesizers.

all

Suitable for all devices.

Just like meta, the link element has no content or end tag so to increase the benefit to visitors, include a title attribute to provide a little more context to what the link is pointing too - such as the title of the previous article, rather than just leave it as “previous”.

<link rel="home" title="Home" href="http://url/of/home/page" />

<link rel="prev" title="Title of previous page" href="http://url/of/previous/page" />

<link rel="next" title="Title of next page" href="http://url/of/next/page" />

Using Document Links

That’s the theory out of the way, let’s look at some examples of real-world usage. By viewing the source code of this website you’ll find the following markup examples:

A link to the style sheet:

<link rel="stylesheet" href="http://www.thatstandardsguy.co.uk/wp-content/themes/beastblog/style.css" type="text/css" media="screen" />

This markup should be familiar to many of you I hope. In long-hand this link is identifying a style sheet by location, of MIME type “text/css”, for screen presentation.

A link to the RSS feed:

<link rel="alternate" type="application/rss+xml" title="RSS" ref="http://feeds.feedburner.com/ThatStandardsGuy" />

A very common feature of blogging software and news-driven websites. This link points to an alternative method for accessing this website’s content.

A link to all the posts made during April 2006:

<link rel="archives" title="April 2006" href="http://www.thatstandardsguy.co.uk/2006/04/" />

Not defined in the specification, my assumption is that this link type needs to use a profile to expose the information in the site navigation bar.

Check out Joe Clark’s on line serialisation of his book Building Accessible Websites. View the source code for the markup but definitely enable the site navigation toolbar. Very useful in this context I’m sure you will agree.

Conclusion

Despite patchy support, we should endeavour to use document linking as much as possible to give our visitors, including search engines, more choice in discovering and navigating our content.

References

• W3C — Document relationships: the link element
• W3C — Link types

The Complete “From the Top” Series

• Document Type Definitions.
• MIME and Content Negotiation.
• Defining Content Language.
• The Head Element.
• The Title Element.
• The Meta Element.
• The Link Element — this article.

 

The meta element provides web document authors the ability to provide information about the document rather than the content itself. In the sixth article in my series “From the Top”, I continue to explore what we may wish to include between the head tags. This article is not a discussion on Search Engine Optimisation (SEO) techniques although the guidelines offered may help (and ethically so) in that regard.

• The Meta Element
• The Name and Content Attributes — working as a pair
• The Lang and Dir Attributes - describing the meta data some more
• The Scheme Attribute
• The HTTP-EQUIV Attribute
• Platform for Internet Content Selection (PICS) labeling
• Other meta tags
• Conclusion
• Further Reading

The Meta Element

Generally, specifying meta data includes declaring a property value and a content value. For example, in the head of this document you will find the following meta information:

<meta name="author" content="Karl Dawson" />

In the above example, the name attribute is identifying a property of “author” with the value of that property defined in the content attribute. Allowable attributes include:

• name
• content
• lang
• dir
• scheme
• http-equiv

Whereas the name attribute may be substituted with the http-equiv attribute, the content attribute is always present in a meta tag because its value is the meta data. Also note that the meta tag is self-closing with either /> or > for Extensible Hypertext Markup (XHTML) or Hypertext Markup Language (HTML) respectively.

The Name and Content Attributes - working as a pair

The name attribute identifies the property whose value is specified by the value of the following content attribute.

Popular property values include:

• keywords
• description
• generator
• author
• copyright

A meta tag describing keywords, for example <meta name="keywords" content="keyword1, keyword2, etc"> is often included to provide search engines with keywords to find your website. However, due to the amount of abuse from keyword spamming many search engines ignore this meta tag and instead rely on weighting a page for relevancy to a search term based on the actual content of the page. Additionally, if you repeat a keyword too many times your site will be penalised and given a lower ranking. To cover your bases you might still want to include a list of keywords but don’t get too hung up on them. Choose 15 to 20 keywords from your title, content headings and opening paragraphs to assist, but not harm your search engine ranking.

Often accompanying a keyword meta tag, a description meta tag provides search engines and directories with a summary of the page. Write a short, unique 25 word description of no more than perhaps 160 to 180 characters (including whitespace). This blog utilises a WordPress plugin to take the first few sentences of the article — essentially the introduction, to automatically do this. If your content management system (CMS) or blog publishing system has a similar feature then you may wish to adopt a similar approach (or write one for a bespoke development of course).

An example from the home page of this blog:

<meta name="description" content="personal blog on web standards and accessibility by Karl Dawson" />

The generator meta tag is needless fluff as far as I’m concerned but for this blog I’ve left it in place — all it does is indicate what program was used to create the blog (WordPress). If anyone can provide any benefits of this to visitors or authors (other than idle curiosity) please leave a comment below.

Author and copyright meta tags are probably useful, especially for articles and tutorials written to blogs where your name doesn’t form part of the website’s name. Again, from this site an example would look like:

<meta name="author" content="Karl Dawson" />
<meta name="copyright" content="Copyright That Standards Guy - Theme and Mods Mike Cherim - http://green-beast.com/. All rights reserved." />

Where the content attribute’s value is a Universal Resource Identifier (URI) you may prefer to use a link tag instead of a meta tag:
<meta name="DC.identifier" content="http://www.ietf.org/rfc/rfc1866.txt"> becomes…
<link rel="DC.identifier" type="text/plain" href="http://www.ietf.org/rfc/rfc1866.txt">

The Lang and Dir Attributes — describing the meta data some more

At this point it is probably worthwhile to mention the lang and dir attributes. The lang attribute assists speech synthesizers to apply language-dependent pronunciation rules on the value of the content attribute. This would be useful, for example, if the primary language of your website was English but a page author had a French name. In this case you would modify the author meta tag as follows:

<meta name="author" lang="fr" content="Thierry Henry" />

For a fuller description of these attributes be sure to read an earlier article on content language.

The Scheme Attribute

Just like the lang and dir attributes, the scheme attribute assists user agents by providing context to correctly interpret meta data. Our American cousins for example write their dates different to us Brits (and everyone else too?) so “10-3-06″ may mean either 10 March 2006 or 3 October 2006. To eliminate any ambiguity you would set the value of the scheme attribute as “Day-Month-Year”. For example an article written on the aforementioned date could have the following meta tag:

<meta scheme="Day-Month-Year" name="date" content="10-3-06" />

The scheme attribute can also provide non-critical, helpful information to user agents by giving a contextual reference to a property value.
The World Wide Web Consortium (W3C) give the following example of an International Standard Book Number (ISBN) being applied to a web page about a book:

<meta scheme="ISBN" name="identifier" content="0-8230-2355-9" />

Values for the scheme attribute depend on the property name and the associated profile.
A popular meta data profile would be that of the Dublin Core Metadata Initiative (DCMI).

“The [DCMI] is an organization dedicated to promoting the widespread adoption of interoperable meta data standards and developing specialized meta data vocabularies for describing resources that enable more intelligent information discovery systems”.

The HTTP-EQUIV Attribute

The http-equiv attribute may be used in place of the name attribute to create HTTP header responses. Allowable values include Content-Type, Expires, Set-Cookie, Refresh or PICS-Label.

• Content-Type — Authors may use a meta tag to define default information for a document such as the default scripting language, default style sheet language and the document character encoding — with the latter being the most popular of the three. Many argue that the information contained in a content-type meta tag such as <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> should be written directly into the HTTP header but when a page is viewed offline it may be beneficial to have this information available to the user agent.
• Expires — An http-equiv of value expire indicates that a document will expire on the date set in the content attribute. When the date passes, the user agent should load a new copy from the server rather than use a copy from its cache.
• Set-Cookie — This sets the name and value for a persistent cookie in the following format <meta http-equiv="Set-Cookie" content="value=n;expires=date; path=url"> where value is the name of the cookie, “n” is the value to be set into the cookie. If expires=date; is omitted then the cookie will be deleted when the browser closes (a session cookie).
• Refresh — Never use refresh as this makes the page inaccessible to some users. Even if you only intend to deliver overall level A compliance this is important and easy to achieve. If it is necessary to automatically forward a visitor to a different page use a server-side redirect.

Platform for Internet Content Selection (PICS) labeling

This is an infrastructure that associates meta data with Internet content. Originally developed for parents and teachers to control what children could view on the Internet it also allows for other uses of labeling such as intellectual property rights management. With filtering and other ratings sites using this system it could be beneficial to include such meta data in future projects. Safe Surf and the Internet Content Rating Association (ICRA) are two such self-certifying rating systems with the latter recommended in the UK Cabinet Office’s web developer’s handbook. It should be noted that the ICRA moved away from the use of the PICS system in 2005 but ICRAplus does still recognise such labeling.

The recommended method of distributing the PICS label is to include it in the HTTP header but failing that you can either maintain a label bureau on your own web server (or use an external host such as Cyber Patrol) or use an http-equiv meta tag. An example label from this blog looks like:

<meta http-equiv="PICS-Label" content='(PICS-1.1 "http://www.classify.org/safesurf/" L gen true for "http://www.thatstandardsguy.co.uk" r (SS~~000 1))'>

Other meta tags

There are two other meta tags that you may wish to consider using also. The first is designed to stop the image toolbar controls in Internet Explorer from showing when you hover over an image. Essentially it provides a mechanism to expand an image to full size or to save the image without opening the context menu options. It can be easily argued that interfering with the user agent is the route to the dark side but some people will want to use it to maintain their designed look. The second tag prevents Microsoft products from auto-generating “smart tags” on your web pages. These tags would underline key words on your web pages much like a spell checker would and create a link to Microsoft approved (paid for) advertising. I don’t think Internet Explorer 6 shipped with this “feature” so if anyone can expand on this please leave a comment. Below is each tag:

<meta http-equiv="imagetoolbar" content="no" />

<meta name="MSSmartTagsPreventParsing" content="true" />

Conclusion

Meta data is used to describe the document itself rather than the content within. Include well-written meta tags for keywords and description for search engines and their result pages and consider other meta tags, using profiles like Dublin Core that add useful information about the web page.

Next in “From the Top”

In the next article I will be looking at how to include links to other documents and files in the head section of your web pages.

Further Reading

• HTMLHelp.com Meta — Meta-information.
• SEOconsultants.com Building the perfect page.
• W3C: The global structure of an HTML document.
• W3C: Platform for Internet Content Selection (PICS).

The Complete “From the Top” Series

• Document Type Definitions.
• MIME and Content Negotiation.
• Defining Content Language.
• The Head Element.
• The Title Element.
• The Meta Element — this article.
• The Link Element.

 

Another fine book from Dan Cederholm. This time around he divvies a typical web page down to its components — text, navigation, boxes and rows and the layout itself and explains and demonstrates the most bulletproof way of implementing them in a standards-compliant way.

In each chapter he’ll pluck a real-world example to deconstruct, tell you why it’s not bulletproof and offer a rebuild in a very easy to follow manner using XHTML and Cascading Style Sheets (CSS). He’ll then explain why his solution is bulletproof.

There’s something here for everyone, I consider myself pretty knowledgeable on the CSS front but I’ve said “Ohhhh, that’s neat” a few times already (I’m hopping around the book). Which is another point, it’s very accessible in that respect — no reading chapters 1 to 4 before tackling the issues presented in chapter 5 (hypothetical use of numbers).

Beginner or expert alike, I think you’ll like this book a lot.

Buy now from Amazon.co.uk, Amazon.com, Amazon.ca, Amazon.de, Amazon.fr or Amazon.co.jp