Canonicals: What they are and how to use them

Permanent Link: Canonicals: What they are and how to use them 10. Juni 2009 Comment No Comment

Today I wanna give a short insight on canonicals. A canonical is a (fairly new) SEO item in the head section of a HTML document, which contains the parent URL. Let's say you have a page which contains a sortable list whose URL is Besides AJAX-sorting you also have sorting with URLs like, which reloads the page showing the sortable list ordered by the price descending. Usually you either 2 would have pages in the Google index with the almost the same content or 1 page since you put noindex,nofollow in one of them. This is where canonical comes into play:

First off you leave the noindex, nofollow in the page with the sorted list. Second you put a canonical into the HTML head section telling search engines where it can find the original list!

<link rel="canonical" href="/sortable-list">

That way the sorted list URL will not only not be in the Google index but the original URL gets more "attention".

The latest Firefox versions already show if a canonical is defined:

Canonicals in Firefox

P.S. It does no harm to put the canonical tag in the original page itself.

Ordered Lists: Deprecated attributes start and value

Permanent Link: Ordered Lists: Deprecated attributes start and value 24. Februar 2009 Comment No Comment

Today I was working on a Top 100 List with pagination. I thought a quite sensible way would be to use ordered lists, so I don't need to take care of displaying the place myself. Working with pagination I was looking for a way to start the values of the ol-items at #51 on page 2, #101 on page 3 and so on. Searching at W3C directly, I came across this page: According to it, <ol> has start attribute, and <li> has a value attribute, which would give me the following to possibilities:

<ol start="51">
<li>Product Name</li>

<li value="51">Product Name</li>

But there is one stupid disadvantage these 2 attributes have: The attributes are marked as deprecated (and even on a page for HTML4). Following the link on the word Deprecated I found this W3C-own definition:

A deprecated element or attribute is one that has been outdated by newer constructs. Deprecated elements are defined in the reference manual in appropriate locations, but are clearly marked as deprecated. Deprecated elements may become obsolete in future versions of HTML.

User agents should continue to support deprecated elements for reasons of backward compatibility.

Definitions of elements and attributes clearly indicate which are deprecated.

This specification includes examples that illustrate how to avoid using deprecated elements. In most cases these depend on user agent support for style sheets. In general, authors should use style sheets to achieve stylistic and formatting effects rather than HTML presentational attributes. HTML presentational attributes have been deprecated when style sheet alternatives exist (see, for example, [CSS1]).

Meaning: If start and value are deprecated there HAS to be another way to achieve this. After hours of searching I found out that there seems to be no alternative. The only valuable thing I found was this page about ordered lists that confirmed my apprehension (btw. same goes for the li value attribute):

Compatibility Notes

The start attribute of the ol element was deprecated in HTML 4.01, and is not supported in XHTML 1.0 Strict DTD.

Note: At the moment, there is no CSS alternative for the start attribute.

That was the moment I said: "F*ck it, I'm going to use it anyway" just to find out 5 minutes later, that the Internet Explorer is too dumb to use it correctly. For some microsoftish reason the numbers IE shows are totally wrong, no matter if I used start or value. I encountered missing numbers and when he got to 99 he sometimes commenced at 100, sometimes at 0(!).

This is so great. Thanks to everyone at W3C and Microsoft.

Using Checkboxes / Radio Buttons and Labels

Permanent Link: Using Checkboxes / Radio Buttons and Labels 24. November 2008 Comment No Comment

Common situation: You have a formular on a webpage that has some radio buttons or checkboxes in it. Most likely there is some text besides the radio button / checkbox and most likely you will not be able to click the text in order to trigger the radio button / checkbox. This is rather annoying, especially since the solution to this is fairly easy: