Text (term, word, tag) Clouds

Posted on by

Examples of tag clouds

A text, term, word or tag cloud, also called a weighted list in visual design, is a representation for text data to show the most prominent terms and their relative prominence. These clouds are typically used to depict keyword metadata (tags) on websites. The importance of each tag is shown with font size or color.

When used as website navigation aids, the terms are hyperlinked to items associated with the tag. Compared to conventional navigation, tag clouds can provide visitors with an instant illustration of the main topics, giving a very specific and precise orientation of the site’s content. Examples and good practice for tag clouds, with a gallery, have been published in 2007 by Vitaly Friedman, editor-in-chief of the Smashing Magazine.

There is a number of on-line tools available which help designers to create tag clouds automatically. A few links are listed hereafter :

It’s also easy to generate hand-made tag clouds by creating the required number of css-classes and applying them to the HTML code.

Example :
CSS :

div {text-align:left; font-family:Arial; background-color:white; border: 1px solid silver}
.tag1 {color:red; font-size:12px}
.tag2 {color:blue; font-size:14px}
.tag3 {color:green; font-size:18px}

HTML:

<div>
<a href="url">Term ABC</a>
<a href="url">Term defgh</a>
<a href="url">Term 1234</a>
<a href="url">Term xyz xyz</a>
</div>

Additional informations and tools about tag clouds are available at the following links :