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 Flicker.

Tag clouds are a list of links that change in size and weight (sometimes color too) depending upon some measurable 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.

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="#" class="tag4">Adding Streaming Audio Files</a></li>
��� <li><a href="#" class="tag3">Basic Tags for a Web Site</a></li>
��� <li><a href="#" class="tag7">Best Web Design Software</a></li>
��� <li><a href="#" class="tag2">Building a Web Page for the Totally Lost</a></li>
���� <li><a href="#" class="tag2">Color Symbolism</a></li>
</ul>

�

�

  classes, one for each tag rank:

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

#cloud{display:inline; list-style:none;}

#cloud a { padding: 0px; }

#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; }

�

You can also see this sample tag cloud online in:

�A Basic Tag Cloud - no semantic markup

�A List Tag Cloud - using an unordered list for semantic markup

http://webdesign.about.com/od/csstutorials/a/aa011407.htm