footnotes-examples

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

• Jeremy Boggs
• Andy Mabbett

Real-World Examples

Weblogs

• "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.

<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

• "Scholarship on the Web: Managing Endnotes

Existing Practices

• West Midland Bird Club - Blithfield Reservoir: Survey of Flowering Plants
• Wikipedia - Pink Floyd
  • Note bad accessibility practice of having same text linking to different targets, without even having differentiating title attributes.