[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