Tag Cloud

[shapper]

Hello,

What is the correct markup and CSS styles to create a Tag Cloud?

Should I place each tag inside a list item of an ordered list and
style the list item with a different CSS class according to the tag
frequency to change its size and color?

Does anyone knows a good article on this?

Thanks,
Miguel

[Joost Diepenmaat]

shapper <md*****@gmail.comwrites:

Hello,

What is the correct markup and CSS styles to create a Tag Cloud?

Should I place each tag inside a list item of an ordered list and
style the list item with a different CSS class according to the tag
frequency to change its size and color?

If you have a real ordering of relevance/frequency/whatever the best
way to markup the list is probably to use an ordered list. It seems to
me that you've thought this through better than most people would. In
any case, HTML is very limited, and I don't think you will find any
markup that would be objectively better, just because there is no way
to objectively markup relevance, frequencey or whatever.

Does anyone knows a good article on this?

I don't. But that's just a single data point.

--
Joost Diepenmaat | blog: http://joost.zeekat.nl/ | work: http://zeekat.nl/

[Nik Coughlin]

"shapper" <md*****@gmail.comwrote in message
news:cf**********************************@z66g2000 hsc.googlegroups.com...

Hello,

What is the correct markup and CSS styles to create a Tag Cloud?

Should I place each tag inside a list item of an ordered list and
style the list item with a different CSS class according to the tag
frequency to change its size and color?

Yes

Does anyone knows a good article on this?

http://24ways.org/2006/marking-up-a-tag-cloud

[Roderik]

Nik Coughlin schreef:

"shapper" <md*****@gmail.comwrote in message
news:cf**********************************@z66g2000 hsc.googlegroups.com...

>Hello,

What is the correct markup and CSS styles to create a Tag Cloud?

Should I place each tag inside a list item of an ordered list and
style the list item with a different CSS class according to the tag
frequency to change its size and color?

Yes

>Does anyone knows a good article on this?

http://24ways.org/2006/marking-up-a-tag-cloud

My 2 cents for the Technorati solution. I think embedding <em>s makes
sense even though the author criticises it. Putting emphasis on
something that has emphasis can be done perfectly. And the argument
about <strongmakes sense in such a way that there is no need for a
<strongelement. Even nicer would have been an optional parameter
stating the amount of emphasis. Like <em strength="5"(with a default
of 1 maybe). But as long that is not part of the HTML standard I would
stay with embedding them.

--
http://www.archytas.nl/
webdesign, internet applicaties, internetgestuurde elektronica

[Jonathan N. Little]

Roderik wrote:

Nik Coughlin schreef:

>"shapper" <md*****@gmail.comwrote in message
news:cf**********************************@z66g200 0hsc.googlegroups.com...

>>Hello,

What is the correct markup and CSS styles to create a Tag Cloud?

Should I place each tag inside a list item of an ordered list and
style the list item with a different CSS class according to the tag
frequency to change its size and color?

Yes

>>Does anyone knows a good article on this?

http://24ways.org/2006/marking-up-a-tag-cloud

My 2 cents for the Technorati solution. I think embedding <em>s makes
sense even though the author criticises it. Putting emphasis on
something that has emphasis can be done perfectly. And the argument
about <strongmakes sense in such a way that there is no need for a
<strongelement. Even nicer would have been an optional parameter
stating the amount of emphasis. Like <em strength="5"(with a default
of 1 maybe). But as long that is not part of the HTML standard I would
stay with embedding them.

Not too familiar with tag clouds, but if you want link characteristics
sized link to some popularity that is a styling issue. This "strength"
attribute regressive back to presentational HTML.

Better:

a.whisper {
font-size: .8em;
volume: soft; /* if you want the effect for the blind */
}

a.announce {
font-size: 1em;
volume: medium; /* if you want the effect for the blind */
}

a.shout {
font-size: 1.5em;
volume: loud; /* if you want the effect for the blind */
}

a.bellow{
font-size: 2.5em;
font-weight: bolder;
volume: x-loud; /* if you want the effect for the blind */
pitch-range: low;
}

a.screech{
font-size: 1.5em;
font-style: italic;
volume: loud; /* if you want the effect for the blind */
pitch-range: high;
}
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com