Posts tagged "meaningful-markup"

This post has been a long time coming.

Reminder message, dated 18 January 2010

It's unacceptable for any website or web application to output dates and times using an arbitrary time zone. Displaying dates and times in UTC/GMT is only slightly better: dates cannot be relied upon, and users must perform mental gymnastics in order to localize date–time combos.

On the Web it's not uncommon to see characters with no inherent meaning used for stylistic reasons. A good example is the Read more » link. Perhaps the directionality of the "»" is suggestive of travelling to another page, or perhaps the letterform is included solely for its aesthetic appeal. Whatever the case, one thing is certain: links do not require right-pointing double angle quotation marks in order to function.

The inclusion of such a character is therefore a design decision. It is decoration, not content. It belongs in a style sheet, not in a page's markup.

Chris Coyier has done it again. Compelled me to stay up all night, that is (it's 7am as I type this). In Chris's latest screencast, CSS Image Switcher, he demonstrates how to create an "image switcher" using CSS. The problem, though, is that his process is wrong.

Incorrect process

1. What effect or experience do I want to create?
2. How can I achieve this using CSS (and JavaScript if necessary)?
3. What can my markup do to help me?

Correct process

1. What effect or experience do I want to create?
2. What is the most correct and meaningful way to describe the content?
3. How can I achieve the desired effect or experience (or something close to it) without altering my markup?

In my post titled Captions over images I advocate the use of definition lists for captioning images. Earlier today I was asked whether this meaningful markup could be used in conjunction with an "image slider" such as Easy Slider 1.5.

I had a look at the Easy Slider source code and decided to write my own image slider using Prototype rather than hacking someone else's code to pieces. It's a proof of concept rather than a full-blown "plugin", but it demonstrates that such functionality is achievable using elegant, meaningful markup.

Check out the Prototype image slider demo to see the code in action.

This is my response to Chris Coyier's screencast titled jQuery Part 3 – Image Title Plugin which I watched a couple of days ago. Something didn't sit right with me at the time, and I've now worked out what it was: JavaScript is not required!

I'll present a JavaScript-free approach for displaying captions over images that uses truly meaningful markup.