footnotes-examples

(Difference between revisions)

Jump to: navigation, search
(Existing Practices)
Current revision (21:49, 20 December 2008) (view source)
m (Reverted edits by BasriCbasv (Talk) to last version by TobyInk)
 
(11 intermediate revisions not shown.)
Line 16: Line 16:
=== Weblogs ===
=== Weblogs ===
-
*[http://daringfireball.net/2007/03/blank_slate "Blank Slate" on Daring Fireball] uses an ordered list for endnotes, and uses the ID attribute in a list item to link to a specific endnote.
+
*[http://daringfireball.net/2007/03/blank_slate "Blank Slate" on Daring Fireball] uses an ordered list for endnotes, and uses the ID attribute in a list item to link to a specific endnote. Also in the ID attribute is the date of publication, to differentiate footnotes if more than one publication (in this case blog posts) occur on a page.
<pre><nowiki>
<pre><nowiki>
Line 43: Line 43:
=== Essays/Tutorials ===
=== Essays/Tutorials ===
-
* [http://www.archiva.net/footnote/index.htm "Scholarship on the Web: Managing Endnotes] Paula Petrik's [http://www.archiva.net/footnote/cssbasic.htm basic CSS example] uses the following markup for the footnote content:
+
* Dan Cohen's [http://chnm.gmu.edu/resources/essays/d/39 "The Future of Preserving the Past"] uses the following markup for the initial reference in the main text, and the content for the footnote:
 +
 
 +
<pre><nowiki>
 +
<sup><a href="#_edn4" name="_ednref4" class="enref" id="_ednref4">4</a></sup>
 +
</nowiki>
 +
</pre>
 +
 
 +
<pre><nowiki>
 +
<p>
 +
<sup><a href="#_ednref4" name="_edn4" class="enref" id="_edn4">4</a></sup>National
 +
Institute of Standards and Technology, “Documentary Information Received by NIST,”
 +
<a href="http://wtc.nist.gov/media/docs_info_received.htm">
 +
  http://wtc.nist.gov/media/docs_info_received.htm
 +
</a>, accessed May 11, 2005.
 +
</p>
 +
</nowiki></pre>
 +
 
 +
* In [http://www.archiva.net/footnote/index.htm "Scholarship on the Web: Managing Endnotes], Paula Petrik's [http://www.archiva.net/footnote/cssbasic.htm basic CSS example] uses the following markup for the footnote content:
<pre><nowiki>
<pre><nowiki>
Line 74: Line 91:
</nowiki></pre>
</nowiki></pre>
* [http://www.brandspankingnew.net/archive/2005/07/format_footnote.html Formatting Footnotes with JavaScript and CSS] is a technique by Timothy Groves that displays footnotes inline with text, then hides/displays the note content with JavasCript. Groves uses the following markup structure:
* [http://www.brandspankingnew.net/archive/2005/07/format_footnote.html Formatting Footnotes with JavaScript and CSS] is a technique by Timothy Groves that displays footnotes inline with text, then hides/displays the note content with JavasCript. Groves uses the following markup structure:
-
**This technique is problematic from a microformats perspective for several reasons: numbers are not used, each note does not have a unique ID, and its difficult or impossible to tell the difference between an annotation and the rest of the text without JavaScript and/or CSS. ([[User:JeremyBoggs|Jeremy Boggs]])
+
**This technique is problematic from a microformats perspective for several reasons: numbers are not used, each note does not have a unique ID, and its difficult or impossible to tell the difference between an annotation and the rest of the text without JavaScript and/or CSS.--[[User:JeremyBoggs|JeremyBoggs]] 08:46, 14 Mar 2007 (PDT)
<pre><nowiki>
<pre><nowiki>
   <p>Lorem ipsum dolor sit amet...<span class="footnote">This is a footnote.</span>...</p>
   <p>Lorem ipsum dolor sit amet...<span class="footnote">This is a footnote.</span>...</p>
</nowiki></pre>
</nowiki></pre>
 +
 +
===Other===
 +
* [http://www.westmidlandbirdclub.com/blithfield/plants20060815.htm West Midland Bird Club - Blithfield Reservoir: Survey of Flowering Plants]
 +
*Wikipedia
 +
**[http://en.wikipedia.org/wiki/Wikipedia:Footnotes Guidance on footnotes, for Wikipedia editors]
 +
** [http://en.wikipedia.org/wiki/Pink_Floyd Wikipedia - Pink Floyd]
 +
***Note bad accessibility practice of having same text linking to different targets, without even having differentiating title attributes.
 +
***Is this the common practice for articles on Wikipedia?--[[User:JeremyBoggs|JeremyBoggs]] 13:43, 11 Mar 2007 (PDT)
 +
****See above.
 +
* [http://www.piggin.net/footnotex/interleavenotes.htm Interleave Notes Example]
 +
* [http://www.piggin.net/footnotemodel/sidenotes.htm Side Notes Example]
== Existing Practices ==
== Existing Practices ==
Line 88: Line 116:
=== Publications that discuss footnoting/endnoting on the web===
=== Publications that discuss footnoting/endnoting on the web===
-
* [http://www.piggin.net/footnoteprint.htm Macro-Typography of Footnotes]
+
* [http://daringfireball.net/2005/07/footnotes "About the Footnotes,"]''Daring Fireball'' by John Gruber
-
* {http://archiva.net/footnote/ Scholarship on the Web: Managing Footnotes & Presenting Footnotes & Endnotes]
+
* [http://blog.fawny.org/2005/07/24/footnote/ "There is No Such Thing as a Footnote,"] ''Fawny'' by Joe Clark
 +
* [http://daringfireball.net/2005/08/notes_on_notes "Notes on Notes,"] ''Daring Fireball'' by John Gruber
 +
* [http://www.piggin.net/footnoteprint.htm "Macro-Typography of Footnotes,"] by Jean-Baptiste Piggin.
 +
* [http://archiva.net/footnote/ Scholarship on the Web: Managing Footnotes & Presenting Footnotes & Endnotes] by Paula Petrik
== See Also ==
== See Also ==
 +
 +
[[citation-strawman-01]]

Current revision

Contents

Footnotes Examples

Per the microformats process this is an examples page documenting existing real world examples of footnotes and endnotes published on the Web.

The Problem

How should footnotes and endnotes be marked up?

Participants

Real-World Examples

Weblogs

<div class="footnotes">

  <hr />
   
    <ol>

    ...

     <li id="fn2-2007-03-04">
     <p>It took me six weeks to choose the exact shade of Daring Fireball’s 
     background color, <code>#4a525a</code>. 
     <a href="#fnr2-2007-03-04"  class="footnoteBackLink"  title="Jump back to footnote 2 in the text.">↩</a>
     </p>
     </li>

     ...

    </ol>

</div>

Essays/Tutorials

<sup><a href="#_edn4" name="_ednref4" class="enref" id="_ednref4">4</a></sup>

<p>
<sup><a href="#_ednref4" name="_edn4" class="enref" id="_edn4">4</a></sup>National 
Institute of Standards and Technology, “Documentary Information Received by NIST,” 
<a href="http://wtc.nist.gov/media/docs_info_received.htm">
   http://wtc.nist.gov/media/docs_info_received.htm
</a>, accessed May 11, 2005.
</p>
<div id="footnotes">

  ...
  
  <p><a href="#fn2ref" class="note">2</a><a name="fn2text" id="fn2text"></a>
E. Landells, <em>The Boys’ Own Toymaker: A Practical Illustrated Guide 
to the Useful Employment of Leisure Hours</em> (London: Griffith and Farran, 
1860), vii.</p>

  ...

</div>
<div id="footnotes">
  ...

  <p><sup><a href="#fn3ref" class="note">3</a></sup><a name="fn3text" id="fn3text"></a>
Paula Petrik, “The Paraphernalia of Childhood: Advice on Toys” from 
“Playthings for the Republic’s Children: American Culture, Toys, and the 
Business of Play,” unpublished manuscript.</p>

  ...

</div>
   <p>Lorem ipsum dolor sit amet...<span class="footnote">This is a footnote.</span>...</p>

Other

Existing Practices

Common Patterns Discovered

Publications that discuss footnoting/endnoting on the web

See Also

citation-strawman-01

footnotes-examples was last modified: Saturday, December 20th, 2008

Views