footnotes-examples

2008-12-20T00:27:01Z

BasriCbasv: oudomeltd

deleltc4tbor
= 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 ==

*[[User:JeremyBoggs|Jeremy Boggs]]
*[[User:AndyMabbett|Andy Mabbett]]

== Real-World Examples ==

=== 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. 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>
<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>
</nowiki></pre>

=== Essays/Tutorials ===

* 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>
<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>
</nowiki></pre>
* [http://www.archiva.net/footnote/csssuper.htm Scholarship on the Web Superscripted Example] add the <sup> element to superscript the note numbers.
<pre><nowiki>
<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>
</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:
**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>
<p>Lorem ipsum dolor sit amet...<span class="footnote">This is a footnote.</span>...</p>
</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 ==

=== Common Patterns Discovered ===

* Use of "footnotes" as a class or ID attribute value for differentiating footnote content from the body of the publication.

=== Publications that discuss footnoting/endnoting on the web===

* [http://daringfireball.net/2005/07/footnotes "About the Footnotes,"]''Daring Fireball'' by John Gruber
* [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 ==

[[citation-strawman-01]]

Microformats Wiki - User contributions [en]

footnotes-examples