- From: poot <cvsmail@w3.org>
- Date: Sat, 27 Dec 2008 21:09:55 +0900 (JST)
- To: public-html-diffs@w3.org
Define how to mark up tag clouds. (whatwg r2595)
sidebar hyperlink
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1766.html#rel-sidebar-hyperlink
4.5.12 The dd element
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1766.html#the-dd-element
4.6 Text-level semantics
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1766.html#text-level-semantics
4.5.13 Common grouping idioms
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1766.html#common-grouping-idioms
5.11.3.18 Hierarchical link types
http://people.w3.org/mike/diffs/html5/spec/Overview.1.1766.html#hierarchical-link-types
http://people.w3.org/mike/diffs/html5/spec/Overview.diff.html
http://dev.w3.org/cvsweb/html5/spec/Overview.html?r1=1.1765&r2=1.1766&f=h
http://html5.org/tools/web-apps-tracker?from=2594&to=2595
===================================================================
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 @@
<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>
</dl></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><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; }
+}
+</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><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:10:31 UTC