HTML Standard Tracker

Filter

File a bug

SVNBugCommentTime (UTC)
2595[Authors] Define how to mark up tag clouds.2008-12-27 12:07
@@ -12684,20 +12684,77 @@ first matching case):</p>
  <dd>The state of being happy.</dd>
  <dd>Good fortune; success. <q>Oh <b>happiness</b>! It worked!</q></dd>
  <dt><dfn>rejoice</dfn></dt>
  <dd class="pronunciation">/ri jois'/</dd>
  <dd><i class="part-of-speech"><abbr>v.intr.</abbr></i> To be delighted oneself.</dd>
  <dd><i class="part-of-speech"><abbr>v.tr.</abbr></i> To cause one to be delighted.</dd>
 &lt;/dl></pre>
   </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 -->
 
   <h4>The <dfn><code>a</code></dfn> element</h4>
 
   <dl class="element">
    <dt>Categories</dt>
    <dd><span>Interactive content</span>.</dd>
    <dd><span>Flow content</span>.</dd>
    <dd>When the element only contains <span>phrasing content</span>: <span>phrasing content</span>.</dd>
@@ -46147,20 +46204,25 @@ at the first element with the given ID must be treated as if it was cloned and r
 
   <p>The <code title="rel-tag">tag</code> keyword may be used
   with <code>link</code>, <code>a</code>, and <code>area</code>
   elements. For <code>link</code> elements, it creates a <span
   title="hyperlink link">hyperlink</span>.</p>
 
   <p>The <code title="rel-tag">tag</code> keyword indicates that the
   <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
   documents.</p>
 
   <p>A hierarchical structure of documents is one where each document
   can have various subdocuments. The document of which a document is a
   subdocument is said to be the document's <em>parent</em>. A document
   with no parent forms the top of the hierarchy.</p>

|