W3C home > Mailing lists > Public > public-html-commits@w3.org > December 2008

html5/spec Overview.html,1.1765,1.1766

From: Ian Hickson via cvs-syncmail <cvsmail@w3.org>
Date: Sat, 27 Dec 2008 12:07:13 +0000
To: public-html-commits@w3.org
Message-Id: <E1LGXwo-00009E-0L@lionel-hutz.w3.org>

Update of /sources/public/html5/spec
In directory hutz:/tmp/cvs-serv553

Modified Files:
	Overview.html 
Log Message:
Define how to mark up tag clouds. (whatwg r2595)

Index: Overview.html
===================================================================
RCS file: /sources/public/html5/spec/Overview.html,v
retrieving revision 1.1765
retrieving revision 1.1766
diff -u -d -r1.1765 -r1.1766
--- Overview.html	27 Dec 2008 11:36:25 -0000	1.1765
+++ Overview.html	27 Dec 2008 12:07:11 -0000	1.1766
@@ -313,7 +313,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>
@@ -9768,6 +9771,51 @@
  &lt;dd&gt;&lt;i class="part-of-speech"&gt;&lt;abbr&gt;v.intr.&lt;/abbr&gt;&lt;/i&gt; To be delighted oneself.&lt;/dd&gt;
  &lt;dd&gt;&lt;i class="part-of-speech"&gt;&lt;abbr&gt;v.tr.&lt;/abbr&gt;&lt;/i&gt; To cause one to be delighted.&lt;/dd&gt;
 &lt;/dl&gt;</pre>
+  </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.<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 --><h4 id=the-a-element><span class=secno>4.6.1 </span>The <dfn><code>a</code></dfn> element</h4><dl class=element><dt>Categories</dt>
    <dd><a href=#interactive-content-0>Interactive content</a>.</dd>
    <dd><a href=#flow-content-0>Flow content</a>.</dd>
@@ -32748,7 +32796,10 @@
   with <code><a href=#the-link-element>link</a></code>, <code><a href=#the-a-element>a</a></code>, and <code><a href=#the-area-element>area</a></code>
   elements. For <code><a href=#the-link-element>link</a></code> elements, it creates a <a href=#hyperlink-link title="hyperlink link">hyperlink</a>.<p>The <code title=rel-tag><a href=#link-type-tag>tag</a></code> keyword indicates that the
   <em>tag</em> that the referenced document represents applies to the
-  current document.<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
+  current document.<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.<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
   documents.<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
Received on Saturday, 27 December 2008 12:07:22 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Saturday, 27 December 2008 12:07:22 GMT