1. Computing

Discuss in my forum

How to Style a Tag Cloud

Use CSS to Style a Tag Cloud

By

What is a Tag Cloud?

A tag cloud is a visual depiction of a list of items. You will often see tag clouds on blogs. It was made popular by sites like Flickr.

Tag clouds are a list of links that change in size and weight (sometimes color too) depending upon some measureable attribute. Most tag clouds are built based on popularity or the number of pages that are tagged with that particular tag. But you can create a tag cloud out of any list of items on your site that have at least two ways of displaying them. For example:

  • A list of articles in alphabetical order with the styles indicating the popularity of the articles.
  • A list of Web sites in alphabetical order with the styles indicating which ones you like the best.
  • A list of Web editors listed in price order with the styles indicating how close each comes to a pre-defined set of criteria.
  • A list of friends with the styles indicating the distance from your house to theirs.

What do You Need to Build a Tag Cloud?

It is easy to build a tag cloud, you only need two things:

  • A list of items (like Web articles, Web sites, or your friends)
  • A measurement for each of the items (like pageviews per day, your ranking 1-10, or the distance to your house).

Most tag clouds are lists of links, so it helps if each item has a URL associated with it. But that is not required to create a visual hierarchy.

Steps to Build a Tag Cloud of Popular Links

My site has articles that get pageviews every day, and this is an easy metric for me to use to create a tag cloud. So for this example, we'll create a tag cloud from a list of articles, the top 25 articles on my site for the week of January 1, 2007.

  1. Determine how many levels you want in your hierarchy.
    While it's possible to have as many levels in your cloud as you have items in your list, this gets tedious to code, and the differences can be very minimal. I recommend having no more than 10 levels for your hierarchy.
  2. Decide on the cut off points for each level.
    It might be as simple as cutting your pageviews per day into 1/10 slices - ie. if the biggest page on your site gets 100 pageviews a day, you could slice it as 100+, 90-100, 80-90, 70-80, etc. I chopped my pageviews up in that fashion.
  3. List your items in pageview order, and give them a rank based on step 2
    Don't worry if you don't have any items in some of the slots, that just makes the cloud more interesting.
  4. Resort your list in alphabetical order (or whatever second sort you want to use).
    This is what makes the cloud interesting. If you leave it sorted by rank, then it will just be a list with the largest items at the top down to the smallest at the bottom.
  5. Write your HTML so that the rank is a class number.
    <a href="/streamingmedia/a/aa071000a.htm" class="tag4">Adding Streaming Audio Files</a>

Once you have the HTML for each individual list item, and the order you want to display them, then you need to make a decision. You can place the links in a paragraph and you'd be done. But this wouldn't be semantically marked up, and anyone without CSS coming to your tag cloud would just see a large paragraph of links. The HTML for this type of list would look like this:

<p id="cloud">
 <a href="/streamingmedia/a/aa071000a.htm" class="tag4">Adding Streaming Audio Files</a>
 <a href="/html101classes/a/bl_xclass1_2a.htm" class="tag3">Basic Tags for a Web Site</a>
 <a href="/htmleditors/a/aa121304.htm" class="tag7">Best Web Design Software</a>
 <a href="/beginningtutorials/a/aa033103a.htm" class="tag2">Building a Web Page for the Totally Lost</a>
 <a href="/color/a/aa072604.htm" class="tag2">Color Symbolism</a>
 </p>

Instead, I recommend you create your tag cloud using an unordered list. It's a few more lines of HTML and CSS code but it ensures that the content will be readable no matter who comes to view it. The HTML would look like this:

<ul id="cloud">
 <li><a href="/streamingmedia/a/aa071000a.htm" class="tag4">Adding Streaming Audio Files</a></li>
 <li><a href="/html101classes/a/bl_xclass1_2a.htm" class="tag3">Basic Tags for a Web Site</a></li>
 <li><a href="/htmleditors/a/aa121304.htm" class="tag7">Best Web Design Software</a></li>
 <li><a href="/beginningtutorials/a/aa033103a.htm" class="tag2">Building a Web Page for the Totally Lost</a></li>
 <li><a href="/color/a/aa072604.htm" class="tag2">Color Symbolism</a></li>
 </ul>

But Where are the Styles for the Tag Cloud

Now we get to the fun part. The CSS styles. When you style a tag cloud, you usually change the font size and the font weight. You can also change the color of the font or the background or any other style attribute, but size and weight are traditional.

You need ten style classes, one for each tag rank:

#cloud a.tag1 { font-size: 0.7em; font-weight: 100; }
 #cloud a.tag2 { font-size: 0.8em; font-weight: 200; }
 #cloud a.tag3 { font-size: 0.9em; font-weight: 300; }
 #cloud a.tag4 { font-size: 1.0em; font-weight: 400; }
 #cloud a.tag5 { font-size: 1.2em; font-weight: 500; }
 #cloud a.tag6 { font-size: 1.4em; font-weight: 600; }
 #cloud a.tag7 { font-size: 1.6em; font-weight: 700; }
 #cloud a.tag8 { font-size: 1.8em; font-weight: 800; }
 #cloud a.tag9 { font-size: 2.2em; font-weight: 900; }
 #cloud a.tag10 { font-size: 2.5em; font-weight: 900; }

I like to include some styles around the cloud itself: center the cloud text, set a line-height so that the cloud is readable, and make sure that the anchor tags have no padding on them:

#cloud { padding: 2px; line-height: 3em; text-align: center; }
 #cloud a { padding: 0px; }

Finally, if you're using the semantic styling method (ie. the unordered list), you'll need to add two more lines of CSS so that the list doesn't have bullets and isn't indented:

#cloud { margin: 0; }
 #cloud li { display: inline; }

You can see my sample tag cloud online:

  1. About.com
  2. Computing
  3. Web Design / HTML
  4. Cascading Style Sheets
  5. CSS Tutorials
  6. How to Style a Tag Cloud - Use CSS to Generate a Tag Cloud on Your Site

©2014 About.com. All rights reserved.