Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
[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 61efebd
Show file tree
Hide file tree
Showing 2 changed files with 126 additions and 1 deletion.
65 changes: 64 additions & 1 deletion index
Expand Up @@ -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>
Expand Down Expand Up @@ -11936,6 +11939,61 @@ first matching case):&lt;/p&gt;
</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 -->

Expand Down Expand Up @@ -40502,6 +40560,11 @@ at the first element with the given ID must be treated as if it was cloned and r
<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>

Expand Down
62 changes: 62 additions & 0 deletions source
Expand Up @@ -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 -->

Expand Down Expand Up @@ -46154,6 +46211,11 @@ at the first element with the given ID must be treated as if it was cloned and r
<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>

Expand Down

0 comments on commit 61efebd

Please sign in to comment.