[html5] r1473 - /
whatwg at whatwg.org
whatwg at whatwg.org
Mon Apr 21 05:12:43 PDT 2008
Author: ianh
Date: 2008-04-21 05:12:43 -0700 (Mon, 21 Apr 2008)
New Revision: 1473
Modified:
index
source
Log:
[a] (0) Notes on how to do footnotes.
Modified: index
===================================================================
--- index 2008-04-21 09:33:11 UTC (rev 1472)
+++ index 2008-04-21 12:12:43 UTC (rev 1473)
@@ -593,6 +593,9 @@
<li><a href="#usage"><span class=secno>3.10.22 </span>Usage
summary</a>
+
+ <li><a href="#footnotes"><span class=secno>3.10.23
+ </span>Footnotes</a>
</ul>
<li><a href="#edits"><span class=secno>3.11 </span>Edits</a>
@@ -12550,6 +12553,87 @@
<!-- XXX when you do this, also reorder the elements in this section
to bring the related ones closer together. -->
+ <h4 id=footnotes><span class=secno>3.10.23 </span>Footnotes</h4>
+
+ <p>HTML does not have a dedicated mechanism for marking up footnotes. Here
+ are the recommended alternatives.
+
+ <p>For short inline annotations, the <code title=attr-title><a
+ href="#title">title</a></code> attribute should be used.
+
+ <div class=example>
+ <p>In this example, two parts of a dialog are annotated.</p>
+
+ <pre><dialog>
+ <dt>Customer
+ <dd>Hello! I wish to register a complaint. Hello. Miss?
+ <dt>Shopkeeper
+ <dd><span title="Coloquial pronounciation of 'What do you'"
+ >Watcha</span> mean, miss?
+ <dt>Customer
+ <dd>Uh, I'm sorry, I have a cold. I wish to make a complaint.
+ <dt>Shopkeeper
+ <dd>Sorry, <span title="This is, of course, a lie.">we're
+ closing for lunch</span>.
+</dialog></pre>
+ </div>
+
+ <p>For longer annotations, the <code><a href="#a">a</a></code> element
+ should be used, pointing to an element later in the document. The
+ convention is that the contents of the link be a number in square
+ brackets.
+
+ <div class=example>
+ <p>In this example, a footnote in the dialog links to a paragraph below
+ the dialog. The paragraph then reciprocally links back to the dialog,
+ allowing the user to return to the location of the footnote.</p>
+
+ <pre><dialog>
+ <dt>Announcer
+ <dd>Number 16: The <i>hand</i>.
+ <dt>Interviewer
+ <dd>Good evening. I have with me in the studio tonight Mr
+ Norman St John Polevaulter, who for the past few years has
+ been contradicting people. Mr Polevaulter, why <em>do</em>
+ you contradict people?
+ <dt>Norman
+ <dd>I don't. <a href="#fn1" id="r1">[1]</a>
+ <dt>Interviewer
+ <dd>You told me you did!
+</dialog>
+<section>
+ <p id="fn1"><a href="#r1">[1]</a> This is, naturally, a lie,
+ but paradoxically if it were true he could not say so without
+ contradicting the interviewer and thus making it false.</p>
+</section></pre>
+ </div>
+
+ <p>For side notes, longer annotations that apply to entire sections of the
+ text rather than just specific words or sentences, the <code><a
+ href="#aside">aside</a></code> element should be used.
+
+ <div class=example>
+ <p>In this example, a sidebar is given after a dialog, giving some context
+ to the dialog.</p>
+
+ <pre><dialog>
+ <dt>Customer
+ <dd>I will not buy this record, it is scratched.
+ <dt>Shopkeeper
+ <dd>I'm sorry?
+ <dt>Customer
+ <dd>I will not buy this record, it is scratched.
+ <dt>Shopkeeper
+ <dd>No no no, this's'a tobacconist's.
+</dialog>
+<aside>
+ <p>In 1970, the British Empire lay in ruins, and foreign
+ nationalists frequented the streets — many of them Hungarians
+ (not the streets — the foreign nationals). Sadly, Alexander
+ Yalt has been publishing incompetently-written phrase books.
+</aside></pre>
+ </div>
+
<h3 id=edits><span class=secno>3.11 </span>Edits</h3>
<p>The <code><a href="#ins">ins</a></code> and <code><a
Modified: source
===================================================================
--- source 2008-04-21 09:33:11 UTC (rev 1472)
+++ source 2008-04-21 12:12:43 UTC (rev 1473)
@@ -10562,6 +10562,95 @@
to bring the related ones closer together. -->
+ <h4>Footnotes</h4>
+
+ <p>HTML does not have a dedicated mechanism for marking up
+ footnotes. Here are the recommended alternatives.</p>
+
+ <p>For short inline annotations, the <code
+ title="attr-title">title</code> attribute should be used.</p>
+
+ <div class="example">
+
+ <p>In this example, two parts of a dialog are annotated.</p>
+
+ <pre><dialog>
+ <dt>Customer
+ <dd>Hello! I wish to register a complaint. Hello. Miss?
+ <dt>Shopkeeper
+ <dd><span title="Coloquial pronounciation of 'What do you'"
+ >Watcha</span> mean, miss?
+ <dt>Customer
+ <dd>Uh, I'm sorry, I have a cold. I wish to make a complaint.
+ <dt>Shopkeeper
+ <dd>Sorry, <span title="This is, of course, a lie.">we're
+ closing for lunch</span>.
+</dialog></pre>
+
+ </div>
+
+ <p>For longer annotations, the <code>a</code> element should be
+ used, pointing to an element later in the document. The convention
+ is that the contents of the link be a number in square brackets.</p>
+
+ <div class="example">
+
+ <p>In this example, a footnote in the dialog links to a paragraph
+ below the dialog. The paragraph then reciprocally links back to the
+ dialog, allowing the user to return to the location of the
+ footnote.</p>
+
+ <pre><dialog>
+ <dt>Announcer
+ <dd>Number 16: The <i>hand</i>.
+ <dt>Interviewer
+ <dd>Good evening. I have with me in the studio tonight Mr
+ Norman St John Polevaulter, who for the past few years has
+ been contradicting people. Mr Polevaulter, why <em>do</em>
+ you contradict people?
+ <dt>Norman
+ <dd>I don't. <a href="#fn1" id="r1">[1]</a>
+ <dt>Interviewer
+ <dd>You told me you did!
+</dialog>
+<section>
+ <p id="fn1"><a href="#r1">[1]</a> This is, naturally, a lie,
+ but paradoxically if it were true he could not say so without
+ contradicting the interviewer and thus making it false.</p>
+</section></pre>
+
+ </div>
+
+ <p>For side notes, longer annotations that apply to entire sections
+ of the text rather than just specific words or sentences, the
+ <code>aside</code> element should be used.</p>
+
+ <div class="example">
+
+ <p>In this example, a sidebar is given after a dialog, giving some
+ context to the dialog.</p>
+
+ <pre><dialog>
+ <dt>Customer
+ <dd>I will not buy this record, it is scratched.
+ <dt>Shopkeeper
+ <dd>I'm sorry?
+ <dt>Customer
+ <dd>I will not buy this record, it is scratched.
+ <dt>Shopkeeper
+ <dd>No no no, this's'a tobacconist's.
+</dialog>
+<aside>
+ <p>In 1970, the British Empire lay in ruins, and foreign
+ nationalists frequented the streets — many of them Hungarians
+ (not the streets — the foreign nationals). Sadly, Alexander
+ Yalt has been publishing incompetently-written phrase books.
+</aside></pre>
+
+ </div>
+
+
+
<h3>Edits</h3>
<p>The <code>ins</code> and <code>del</code> elements represent
More information about the Commit-Watchers
mailing list