I could give a list of nice blog post I wrote this year. I could post a cool movie related to web development. However, I would like to do an mind experiment on how to markup the year 2007. Oh yeah, with HTML.

2007 is in my opinion just an chain reaction of both interesting and boring things. Like always we have the option to choose, so I pick the first one. ‘Things’ is multiple, so a good start is using a list. Here we go.

The element name is, as you can see, year2007. I couldn’t find if this is an allowed name in the DTD specification, but I could just see <2007> in my browser if I used that one.

Another thing I ran into was the fact that some events are really general, but some are personal. So I also use the type attribute to indicate which one it is. The attribute can be used on the year2007 element itself, or one of the list items. So now we are talking about semantics!

Only missing is when the events happened. Okey, in the year 2007, but that is not precise enough. So the datetime attribute could be used on the list items. User agents may want to export the dates to a history e-book, for example. So have a look at the example with usage of the datetime attribute.

I am lazy, and since this is a bad joke I will not write a full DTD for all this. However, if I had written one, I could use a good validator that can read custom DTDs and Doctypes to validate the cool document I will markup later. Writing one would not be that difficult, though.

Now we have some kind of structure the list can be filled with some real events. You could expect it, I added some general and personal events that happened in 2007.

To add some style, I made a style sheet to indicate the differences between general and personal events. Since personal events are very important for me, they are a bit heavier. Just a simple CSS2 selector, nothing new invented. Check that out.

By the way, happy new year!

Often a web site displays only a part of the shop items, search results or blog posts. This so called pagination uses buttons or links to navigate through the pages. However, not all pagination methods are very usable or accessible. In this article some ways to optimize this part of a web site.

Design

Size and place. The pagination is a main part of the web site. Since it is critical for users to use this, the worst thing to do with your pagination is to make it small. The links do not have to be huge, but absolutely do not make them smaller than the normal texts on your page. For more attention on the links, you could also use some white space around the pagination. If the links are directly underneath the search results, the don’t catch the attention of the visitor.

Space. The controls need to be easily click-able, so use a quite large area for the links (using some padding). People browsing with a notebook, or people with a motoric skill impairment, can much easier click on these links. Be aware that this space needs to be visible, you could use a background color or a border for this. Some space between the controls themselves is also a good idea (you have plenty of room).

Identification. People know it is a pagination, so underlines are quite useless. It is, however, a good idea to use a hover and a focus state to make things even more clear if you actually use the pagination. It is also not needed to make a link of the current page indicator. You could better emphasize it by a different look and feel. Buttons for the next and previous page help the visitor to recognize a pagination.

Markup

Next en previous links. HTML allows you to specify if a link to another page is the next or previous one in a series of pages. This can be done by using the rel-attribute. The values of the rel-attribute may (for example) be ‘next’ or ‘prev’. It is also possible to use a link-element in the head of your document. That link-element can have a href and a rel attribute. User agent (such as browsers) can use this information to assign short keys to browse to the next page.

Some don’ts. For links it is possible to declare an accesskey and a tabindex attribute. However, these attributes can screw up the normal ‘flow’ of the browser. For example, the tabindex messes up the order of all links on a page. Even so, the accesskey attribute sounds great in theory, but in practice nobody uses them and simply doesn’t expect them. And what if the visitor already uses that key for a program or function within his operating system?

More to read

• All link types for the rel and rev attributes.
• Pagination 101 by Faruk Ateş.
• Item pagination patern at YDN.