Skip to content
Permalink
Browse files

[a] (0) Define how to mark up tag clouds.

git-svn-id: http://svn.whatwg.org/webapps@2595 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
Hixie committed Dec 27, 2008
1 parent 3988476 commit 61efebd176aee369c55e8c43bcf1838903223d7c
Showing with 126 additions and 1 deletion.
  1. +64 −1 index
  2. +62 −0 source
65 index
@@ -379,7 +379,10 @@
<li><a href=#the-li-element><span class=secno>4.5.9 </span>The <code>li</code> element</a></li>
<li><a href=#the-dl-element><span class=secno>4.5.10 </span>The <code>dl</code> element</a></li>
<li><a href=#the-dt-element><span class=secno>4.5.11 </span>The <code>dt</code> element</a></li>
<li><a href=#the-dd-element><span class=secno>4.5.12 </span>The <code>dd</code> element</a></ol></li>
<li><a href=#the-dd-element><span class=secno>4.5.12 </span>The <code>dd</code> element</a></li>
<li><a href=#common-grouping-idioms><span class=secno>4.5.13 </span>Common grouping idioms</a>
<ol>
<li><a href=#tag-clouds><span class=secno>4.5.13.1 </span>Tag clouds</a></ol></ol></li>
<li><a href=#text-level-semantics><span class=secno>4.6 </span>Text-level semantics</a>
<ol>
<li><a href=#the-a-element><span class=secno>4.6.1 </span>The <code>a</code> element</a></li>
</div>


<h4 id=common-grouping-idioms><span class=secno>4.5.13 </span>Common grouping idioms</h4>

<h5 id=tag-clouds><span class=secno>4.5.13.1 </span>Tag clouds</h5>

<p id=tag-cloud>This specification does not define any markup
specifically for marking up lists of keywords that apply to a group
of pages (also known as <i>tag clouds</i>). In general, authors are
encouraged to either mark up such lists using <code><a href=#the-ul-element>ul</a></code>
elements with explicit inline counts that are then hidden and turned
into a presentational effect using a style sheet, or to use SVG.</p>

<div class=example>

<p>Here, three tags are included in a short tag cloud:</p>

<pre>&lt;style&gt;
@media screen, print, handheld, tv {
/* should be ignored by non-visual browsers */
.tag-cloud &gt; li &gt; span { display: none; }
.tag-cloud &gt; li { display: inline; }
.tag-cloud-1 { font-size: 0.7em; }
.tag-cloud-2 { font-size: 0.9em; }
.tag-cloud-3 { font-size: 1.1em; }
.tag-cloud-4 { font-size: 1.3em; }
.tag-cloud-5 { font-size: 1.5em; }
}
&lt;/style&gt;
...
&lt;ul class="tag-cloud"&gt;
&lt;li class="tag-cloud-4"&gt;&lt;a title="28 instances" href="/t/apple"&gt;apple&lt;/a&gt; &lt;span&gt;(popular)&lt;/span&gt;
&lt;li class="tag-cloud-2"&gt;&lt;a title="6 instances" href="/t/kiwi"&gt;kiwi&lt;/a&gt; &lt;span&gt;(rare)&lt;/span&gt;
&lt;li class="tag-cloud-5"&gt;&lt;a title="41 instances" href="/t/pear"&gt;pear&lt;/a&gt; &lt;span&gt;(very popular)&lt;/span&gt;
&lt;/ul&gt;</pre>

<p>The actual frequency of each tag is given using the <code title=attr-title><a href=#the-title-attribute>title</a></code> attribute. A CSS style sheet is
provided to convert the markup into a cloud of differently-sized
words, but for user agents that do not support CSS or are not
visual, the markup contains annotations like "(popular)" or
"(rare)" to categorise the various tags by frequency, thus enabling
all users to benefit from the information.</p>

<p>The <code><a href=#the-ul-element>ul</a></code> element is used (rather than
<code><a href=#the-ol-element>ol</a></code>) because the order is not particular important:
while the list is in fact ordered alphabetically, it would convey
the same information if ordered by, say, the length of the tag.</p>

<p>The <code title=rel-tag><a href=#link-type-tag>tag</a></code> <code title=attr-hyperlink-rel><a href=#attr-hyperlink-rel>rel</a></code>-keyword is <em>not</em> used
on these <code><a href=#the-a-element>a</a></code> elements because they do not represent tags
that apply to the page itself; they are just part of an index
listing the tags themselves.</p>

</div>




<h3 id=text-level-semantics><span class=secno>4.6 </span>Text-level semantics</h3><!-- XXX ew, find a better section name -->

<em>tag</em> that the referenced document represents applies to the
current document.</p>

<p class=note>Since it indicates that the tag <em>applies to the
current document</em>, it would be inappropriate to use this keyword
in the markup of a <a href=#tag-cloud>tag cloud</a>, which lists
the popular tag across a set of pages.</p>


<h5 id=hierarchical-link-types><span class=secno>5.11.3.18 </span>Hierarchical link types</h5>

62 source
@@ -12691,6 +12691,63 @@ first matching case):&lt;/p&gt;
</div>


<h4>Common grouping idioms</h4>

<h5>Tag clouds</h5>

<p id="tag-cloud">This specification does not define any markup
specifically for marking up lists of keywords that apply to a group
of pages (also known as <i>tag clouds</i>). In general, authors are
encouraged to either mark up such lists using <code>ul</code>
elements with explicit inline counts that are then hidden and turned
into a presentational effect using a style sheet, or to use SVG.</p>

<div class="example">

<p>Here, three tags are included in a short tag cloud:</p>

<pre>&lt;style>
@media screen, print, handheld, tv {
/* should be ignored by non-visual browsers */
.tag-cloud > li > span { display: none; }
.tag-cloud > li { display: inline; }
.tag-cloud-1 { font-size: 0.7em; }
.tag-cloud-2 { font-size: 0.9em; }
.tag-cloud-3 { font-size: 1.1em; }
.tag-cloud-4 { font-size: 1.3em; }
.tag-cloud-5 { font-size: 1.5em; }
}
&lt;/style>
...
&lt;ul class="tag-cloud">
&lt;li class="tag-cloud-4">&lt;a title="28 instances" href="/t/apple">apple&lt;/a> &lt;span>(popular)&lt;/span>
&lt;li class="tag-cloud-2">&lt;a title="6 instances" href="/t/kiwi">kiwi&lt;/a> &lt;span>(rare)&lt;/span>
&lt;li class="tag-cloud-5">&lt;a title="41 instances" href="/t/pear">pear&lt;/a> &lt;span>(very popular)&lt;/span>
&lt;/ul></pre>

<p>The actual frequency of each tag is given using the <code
title="attr-title">title</code> attribute. A CSS style sheet is
provided to convert the markup into a cloud of differently-sized
words, but for user agents that do not support CSS or are not
visual, the markup contains annotations like "(popular)" or
"(rare)" to categorise the various tags by frequency, thus enabling
all users to benefit from the information.</p>

<p>The <code>ul</code> element is used (rather than
<code>ol</code>) because the order is not particular important:
while the list is in fact ordered alphabetically, it would convey
the same information if ordered by, say, the length of the tag.</p>

<p>The <code title="rel-tag">tag</code> <code
title="attr-hyperlink-rel">rel</code>-keyword is <em>not</em> used
on these <code>a</code> elements because they do not represent tags
that apply to the page itself; they are just part of an index
listing the tags themselves.</p>

</div>




<h3>Text-level semantics</h3><!-- XXX ew, find a better section name -->

<em>tag</em> that the referenced document represents applies to the
current document.</p>

<p class="note">Since it indicates that the tag <em>applies to the
current document</em>, it would be inappropriate to use this keyword
in the markup of a <a href="#tag-cloud">tag cloud</a>, which lists
the popular tag across a set of pages.</p>


<h5>Hierarchical link types</h5>

0 comments on commit 61efebd

Please sign in to comment.
You can’t perform that action at this time.