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

shapper <mdmoura@gmail.com> writes:

> 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/

"shapper" <mdmoura@gmail.com> wrote in message
news:cff9e119-5546-4357-8d1e-de67030d24b8@z66g2000hsc.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

Nik Coughlin schreef:
> "shapper" <mdmoura@gmail.com> wrote in message
> news:cff9e119-5546-4357-8d1e-de67030d24b8@z66g2000hsc.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 <strong> makes sense in such a way that there is no need for a
<strong> element. 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

Roderik wrote:
> Nik Coughlin schreef:
>> "shapper" <mdmoura@gmail.com> wrote in message
>> news:cff9e119-5546-4357-8d1e-de67030d24b8@z66g2000hsc.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 <strong> makes sense in such a way that there is no need for a
> <strong> element. 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