Or maybe not.

Don’t get me wrong – adding semantics is a good thing. But what’s better is adding the right semantics. This post is coming from a conversation I recently had discussing an issue about how WordPress should display a set of radio buttons. The proposal was to take the current format (radio buttons separated with break elements) and reformat them using list items.

Awesome! More semantics!

But let’s take a closer look at that.

When you wrap content in an unordered list (ul), what semantic values are you actually imposing on that content? The easy answer is that you’re indicating that this is a list – but we all know that you should never define a word with itself. Proclaiming that wrapping elements in a list gives it the semantics of list isn’t a valid construct.

The semantics a list grants are grouping and number. This is a group of discrete items, and there are this many of them. In the case of an ordered list, it also informs the user of sequence.

So if you add the semantics of group and number to a set of radio buttons, what are you actually doing? You’re adding a second layer of semantics that these elements already have – radio buttons are grouped on the name attribute, and counted according to the number of options available in the set.

As a result, it’s of questionable value to place a group of radio buttons into a list structure. That construct is already part of the existing semantics for the group.

When should you add semantic meanings to content? When the information conveyed by those elements isn’t already present. Look at the semantic values inherent in the elements present before adding more information. More information isn’t necessarily better information.

Here ends your lesson in (my opinions on) HTML (HyperText Markup Language) semantics for today.

For a related topic, take a look at Marco Zehe’s What is WAI-ARIA: what does it do for me and what not?. Especially the section under “When should I not use it?”.