Last night I delivered a short presentation on the use of access keys to Refresh Cambridge that generated some good discussion - this is one of the reasons for the group so thank you. Not trusting the trains with even a hint of bad weather I had to make my excuses half-way through Matthew’s presentation to ensure I got back to Ipswich OK so I missed the chance for a swift pint and chat with everyone - I will do better next time because it’s a long way to go for such a short time and I’m sure you think me mad to do it anyway. You can view my presentation online and if you do wish to print it (or view source), you’ll find some extra links too. If you want to look further into the subject you could also take a look at my del.icio.us links on accesskeys.

Last night I was in London to attend the Web Standards Group meeting on Microformats at Westminster University. Mark Norman Francis, Jeremy Keith and Drew McLellan each took turns to describe the past, present and future of microformats, the Semantic Web (capital S, capital W) and the semantic web (lowercase S, lowercase w). I’ll update this post with links to the podcast when it Becomes Available (capital B, capital A). Just listen to it to get the “in” joke. Mike Davies has already blogged about the detail of the event so stop by his corner of the interweb to learn what you missed out on.

Jeremy set us all some homework (now implemented!) so your Tails extension should be lit up now but I will just say that I have been working for a long time on a revamp of this website and you can expect a ton more microformats around here once TSG version 2 is released.

My thanks to Norm, Jeremy and Drew for an excellent talk, Stuart Colville for organising the whole thing, Christian Heilmann for having us in stitches over Speedos, Rednecks and German/Polish relationships, the crazy chick outside the pub at closing time and Jim O’Donnell for putting me up for the night.

Update:
Jeremy’s blog entry (and link to PDF of slides).

Update 23 Sept 2006:
Drew’s slides.
Podcast feed.

Earlier today I needed to create a centered div containing a centered, inline, unordered list to represent a results paginator similar to what you see at the bottom of search result pages. This had me scratching my head longer than necessary because whereas I had the element centered straight off the bat, the border was not displaying top and bottom in Internet Explorer. I had Googled for other examples but didn’t really find my exact problem. As is the nature of these things, a little while after posting for help on the Accessify forums I found the fix myself.

Without further ado and to help future “Googlers” here’s the markup I used to center a div containing a centered, unordered list within it. Feel free to add style and note that the width of the div is both required and limiting at the same time. It works (i.e. stays on one line) up to +2 scaling in Firefox and “Largest” in Internet Explorer 6 but after that it wraps to a new line (obviously, list length and text size will also contribute to when a new line is formed).

Here’s the markup:

<div id="pagination">
<ul>
<li>Pages of results:</li>
<li>Previous</li>
<li class="current-page">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>Next</li>
</ul>
</div>

Got to love WordPress’ failure to leave the anchor tags alone, sorry.

and here’s the style sheet:

/* Results Pagination ------------------------------ */
#pagination{
margin:0 auto 0 auto; /* in full to help IE5Mac */
padding:0;
width:600px;
}

#pagination ul{
display:inline;
margin:0;
padding:0.5em;
list-style:none;
border:1px solid #000;
}

#pagination ul li{
display:inline;
margin:0;
padding:0.5em;
}

.current-page{font-weight:bold;} 

You can see a working example of this technique here.

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.