Tagcloud demos

This page demonstrates various techniques for marking up tagclouds based on existing practices as well as efforts. The goal is to maintain the original visual communicative design of a tagcloud while adding more semantic information to the tag containers.

Normal list

John Allsopp Proposal

Stylesheet

.vvvvv-popular
	{ font-size: 1.76em; }
.vvvv-popular
	{ font-size: 1.5em; }
.vvv-popular
	{ font-size: 1.3em; }
.vv-popular
	{ font-size: 1.1em; }
.v-popular
	{ font-size: 0.9em; }

Chris Messina Proposal

Technique is to use two bigs for most popular, one big for popular, no tags for normal size, one small for second-to-least popular, two smalls for least popular.

Stylesheet

N/A

Chris Messina Alternative Proposal

Technique is to use all bigs:

  1. <a href="/tag/foo" class="tag"><big><big><strong><em></em></strong></big></big></a>
  2. <a href="/tag/foo" class="tag"><big><big><strong></strong></big></big></a>
  3. <a href="/tag/foo" class="tag"><big><big></big></big></a>
  4. <a href="/tag/foo" class="tag"><big></big></a>
  5. <a href="/tag/foo" class="tag"></a>

Stylesheet

.tagcloud	big { font-size: 13px;}
.tagcloud	big strong {font-size: 130%;}
.tagcloud	big big strong {font-size: 130%; font-weight: normal;}
.tagcloud	big big strong em {font-size: 130%; font-style: normal;}