Semantic Animation?

Chris Coyier of CSS-Tricks proposed a unique solution to the problem of CSS animation. He suggests that using empty divs for animation is a bad idea — and I agree with him here.

But here’s where it gets strange. He suggests putting inside these div a poetic explanation of the animation, thus making it more “semantic”, and catering to blind people using the web. This doesn’t make sense to me — if an animation is so crucial to your web design that it is semantic — it actually changes the meaning of the page — then you aren’t going to ever provide for blind people.

A “semantic” web element is something that provides meaning to a web page. Semantics is a good practice — it makes sense to only include what’s necessary for the meaning of a site, and to make sure that your code reflects this meaning. But semantics aren’t crucial everywhere. As mentioned in the comments:

Semantic markup: markup that makes good choices of HTML elements to add (machine-readable) meaning to the document

Unsemantic markup: markup that makes bad choices of HTML elements, which create a less meaningful document (or even a misleading document)

Non-semantic markup: markup that has no effect on the meaning of the document

Non-semantic markup is not a bad practice. Providing features on your site that contribute only to its appearance — and not its content — isn’t a terrible thing to do. To relate this to language, take a look at the following conversation:

Göran: It’s fine weather out today, isn’t it? Nothing better than the sunshine on my back and no clouds in the sky.

Åke: Yes, indeed, my friend. It’s no wonder there are so many people in the park today.

Here’s the dialogue again, with the semantic parts bolded:

Göran: It’s fine weather out today, isn’t it? Nothing better than the sunshine on my back and no clouds in the sky.

Åke: Yes, indeed, my friend. It’s no wonder there are so many people in the park today, they sure look like they’re enjoying it too.

We unconsciously fill our speech with tons of unnecessary phrases, and this isn’t a bad thing (except in certain situations). Likewise, using non-semantic elements on your website isn’t a terrible practice.

CSS animation (or JavaScript animation, or even Flash animation for that matter) is a good example of a non-semantic element. It’s there for the show, not to provide meaning. As such, “making animation semantic” is unnecessary. It only complicates things. It’s as if you took every word that someone ever said literally, deconstructed it, and tried to suck every bit of meaning out of it. That’s absurd!

How to handle animation

Of course, empty divs aren’t the best way to handle animation — Chris was right about that. That’s the unsemantic way to handle CSS animation. Instead, create an object in HTML — an image, a symbol, some text, or possibly a figure — and have CSS animate that.

In other words, don’t create the object being animated with CSS — leave that to the HTML.