As always, there is no write or wrong, just opinion. To me, a tag cloud is simply a list of links.
Key issues are: - Some degree of meaningful link text for screen reader users - Colour (as mentioned in an earlier post) not used to convey critical info - Some degree of semantic meaning of gradients (for devices that do not support css) This last point is hardest. Most of the tag clouds I have marked up have had over 10 variations in size or gradients of popularity/importance. This makes it virtually impossible to find standard elements to mark up these gradients and still give them meaning when styles are not available. One way would be to add meaning to the most and least popular ends of the scale with single (not nested) <small> and <big> elements, then use classes to do all real styling. A rough example: <h3> Most popular pages: </h3> <ul id="tagcloud"> <li><a href="#" class="popularity10"><small>golf</small></a></li> <li><a href="#" class="popularity12">tennis</a></li> <li><a href="#" class="popularity10"><small>swimming</small></a></li> <li><a href="#" class="popularity16">hockey</a></li> <li><a href="#" class="popularity10"><small>cricket</small></a></li> <li><a href="#" class="popularity24"><big>archery</big></a></li> <li><a href="#" class="popularity28"><big>athletics</big></a></li> </ul> The tag cloud could easily be formatted into a single wrapping line to fill a container (with space after each link) using something like: #tagcloud { margin: 0; padding: 0; list-style-type: none;} #tagcloud li { display: inline; margin-right: .5em; } CSS could then be used to "zero" the <big> and <small> elements, so that the classes could control all sizing: #tagcloud small, #tagcloud big { font-size: 100%; } Then, the classes could easily be sized as needed: #tagcloud .popularity10 { font-size: 100%; } #tagcloud .popularity12 { font-size: 110%; } #tagcloud .popularity14 { font-size: 120%; } #tagcloud .popularity16 { font-size: 130%; } #tagcloud .popularity18 { font-size: 140%; } #tagcloud .popularity20 { font-size: 150%; } #tagcloud .popularity22 { font-size: 160%; } #tagcloud .popularity24 { font-size: 170%; } #tagcloud .popularity26 { font-size: 180%; } #tagcloud .popularity28 { font-size: 190%; } The interesting thing here is what to call the classes - as this will depend on the type of tag cloud (popularity, most recent, highest page ranking etc). It would also be interesting if class naming systems could be established to allow developers to mark up tag clouds consistently across the web. Some form of tag cloud microformat? :) Russ ****************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************