Marking Up a Tag Cloud

Harsh words, you might think. But the crimes against decent markup are legion in this area. You see, I’m something of a markup and semantics junkie. So I’m going to analyse some of the more well-known tag clouds on the internet, explain what’s wrong, and then show you one way to do it better.

del.icio.us

I think the first ever tag cloud I saw was on del.icio.us. Here’s how they mark it up.

Unfortunately, that is one of the worst examples of tag cloud markup I have ever seen. The page states that a tag cloud is a list of tags where size reflects popularity. However, despite describing it in this way to the human readers, the page’s author hasn’t described it that way in the markup. It isn’t a list of tags, just a bunch of anchors in a <div>. This is also inaccessible because a screenreader will not pause between adjacent links, and in some configurations will not announce the individual links, but rather all of the tags will be read as just one link containing a whole bunch of words. Markup crime number one.

Flickr

Ah, Flickr. The darling photo sharing site of the internet, and the biggest blind spot in every standardista’s vision. Forgive it for having atrocious markup and sometimes confusing UI because it’s just so much damn fun to use. Let’s see what they do.

Again we have a simple collection of anchors like del.icio.us, only this time in a paragraph. But rather than using a class to represent the size of the tag they use an inline style. An inline style using a pixel-based font size. That’s so far away from the goal of separating style from content, they might as well use a <font> tag. You could theoretically parse that to extract the information, but you have more work to guess what the pixel sizes represent. Markup crime number two (and extra jail time for using non-breaking spaces purely for visual spacing purposes.)

Unfortunately it turns out not to be that decent, and stop calling me Shirley. It’s not exactly terrible code. It does recognise that a tag cloud is a list of links. And, since they’re in alphabetical order, that it’s an ordered list of links. That’s nice. However … fifteen nested <em> tags? FIFTEEN? That’s emphasis for you. Yes, it is parse-able, but it’s also something of a strange way of looking at emphasis. The HTML spec states that <em> is emphasis, and <strong> is for stronger emphasis. Nesting <em> tags seems counter to the idea that different tags are used for different levels of emphasis. Plus, if you had a screen reader that stressed the voice for emphasis, what would it do? Shout at you? Markup crime number three.

So what should it be?

As del.icio.us tells us, a tag cloud is a list of tags where the size that they are rendered at contains extra information. However, by hiding the extra context purely within the CSS or the HTML tags used, you are denying that context to some users. The basic assumption being made is that all users will be able to see the difference between font sizes, and this is demonstrably false.

A better way to code a tag cloud is to put the context of the cloud within the content, not the markup or CSS alone. As an example, I’m going to take some of my favourite flickr tags and put them into a cloud which communicates the relative frequency of each tag.

To start with a tag cloud in its most basic form is just a list of links. I am going to present them in alphabetical order, so I’ll use an ordered list. Into each list item I add the number of photos I have with that particular tag. The tag itself is linked to the page on flickr which contains those photos. So we end up with this first example. To display this as a traditional tag cloud, we need to alter it in a few ways:

The items need to be displayed next to each other, rather than one-per-line

The context information should be hidden from display (but not from screen readers)

The tag should link to the page of items with that tag

Displaying the items next to each other simply means setting the display of the list elements to inline. The context can be hidden by wrapping it in a <span> and then using the off-left method to hide it. And the link just means adding an anchor (with rel="tag" for some extra microformats bonus points). So, now we have a simple collection of links in our second example.

The last stage is to add the sizes. Since we already have context in our content, the size is purely for visual rendering, so we can just use classes to define the different sizes. For my example, I’ll use a range of class names from not-popular through ultra-popular, in order of smallest to largest, and then use CSS to define different font sizes. If you preferred, you could always use less verbose class names such as size1 through size6. Anyway, adding some classes and CSS gives us our final example, a semantic and more accessible tag cloud.

About the author

MarkNormanFrancis is obsessed with HTML, semantics, code quality and doing things right. He is based in London, England and hopes one day to start blogging properly at marknormanfrancis.com.

Comments

Related articles

Sara Soueidan shows us three ways to create icon sprites using SVG: with HTML, CSS and, perhaps most powerfully, fragment identifiers. SVG has come on leaps and bounds this year – will you do the same in 2015?

Meagan Fisher tackles the issue of designing in the browser head on by looking at some of the practicalities of ditching Photoshop and setting your foundations markup. Sorry Photoshop, it’s not me, it’s you.

David Greiner offers invaluable insight into building HTML emails. Just like HTML for the web, email requires an intimate understanding of the software used to view your work. Allow Dave to share from his wealth of experience.

Jeremy Keith issues a call to arms over how passages of dialogue are marked up in HTML, and more specifically, in HTML5. Stand firm, good designers and developers of the web, and don’t let poorly worded specs lead the people astray!

Mark Norman Francis leaves no stone unturned in the quest for better markup. Today’s target is the humble, yet oft-abused definition list. Help the suffering stop this Christmas. With your help, the definition list can rebuild its life and learn to be happy again. We’re counting on you.