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

whatwg at whatwg.org whatwg at whatwg.org
Sat Dec 27 04:07:07 PST 2008


Author: ianh
Date: 2008-12-27 04:07:06 -0800 (Sat, 27 Dec 2008)
New Revision: 2595

Modified:
   index
   source
Log:
[a] (0) Define how to mark up tag clouds.

Modified: index
===================================================================
--- index	2008-12-27 11:36:16 UTC (rev 2594)
+++ index	2008-12-27 12:07:06 UTC (rev 2595)
@@ -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,7 +11939,62 @@
   </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><style>
+ at 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; }
+}
+</style>
+...
+<ul class="tag-cloud">
+ <li class="tag-cloud-4"><a title="28 instances" href="/t/apple">apple</a> <span>(popular)</span>
+ <li class="tag-cloud-2"><a title="6 instances"  href="/t/kiwi">kiwi</a> <span>(rare)</span>
+ <li class="tag-cloud-5"><a title="41 instances" href="/t/pear">pear</a> <span>(very popular)</span>
+</ul></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 -->
 
   <h4 id=the-a-element><span class=secno>4.6.1 </span>The <dfn><code>a</code></dfn> element</h4>
@@ -40502,7 +40560,12 @@
   <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>
 
   <p>Some documents form part of a hierarchical structure of

Modified: source
===================================================================
--- source	2008-12-27 11:36:16 UTC (rev 2594)
+++ source	2008-12-27 12:07:06 UTC (rev 2595)
@@ -12691,7 +12691,64 @@
   </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><style>
+ at 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; }
+}
+</style>
+...
+<ul class="tag-cloud">
+ <li class="tag-cloud-4"><a title="28 instances" href="/t/apple">apple</a> <span>(popular)</span>
+ <li class="tag-cloud-2"><a title="6 instances"  href="/t/kiwi">kiwi</a> <span>(rare)</span>
+ <li class="tag-cloud-5"><a title="41 instances" href="/t/pear">pear</a> <span>(very popular)</span>
+</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 -->
 
   <h4>The <dfn><code>a</code></dfn> element</h4>
@@ -46154,7 +46211,12 @@
   <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>
 
   <p>Some documents form part of a hierarchical structure of




More information about the Commit-Watchers mailing list