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...
1 parent 3988476 commit 61efebd176aee369c55e8c43bcf1838903223d7c @Hixie Hixie committed Dec 27, 2008
Showing with 126 additions and 1 deletion.
  1. +64 −1 index
  2. +62 −0 source
View
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>
@@ -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 -->
@@ -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>
View
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 -->
@@ -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>

0 comments on commit 61efebd

Please sign in to comment.