docutils/test/functional/expected/footnotes_html5.html

   1 <!DOCTYPE html>
   2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   3 <head>
   4 <meta charset="utf-8" />
   5 <meta name="generator" content="Docutils 0.22b.dev: https://docutils.sourceforge.io/" />
   6 <meta name="viewport" content="width=device-width, initial-scale=1" />
   7 <title>Test footnote and citation rendering</title>
   8 <link rel="stylesheet" href="../input/data/minimal.css" type="text/css" />
   9 <link rel="stylesheet" href="../input/data/responsive.css" type="text/css" />
  10 </head>
  11 <body>
  12 <main id="test-footnote-and-citation-rendering">
  13 <h1 class="title">Test footnote and citation rendering</h1>
  14
  15 <p>Paragraphs may contain footnote references (manually numbered<a class="superscript" href="#footnote-1" id="footnote-reference-1" role="doc-noteref"><span class="fn-bracket">[</span>1<span class="fn-bracket">]</span></a>, anonymous auto-numbered<a class="superscript" href="#footnote-2" id="footnote-reference-2" role="doc-noteref"><span class="fn-bracket">[</span>3<span class="fn-bracket">]</span></a>, labeled auto-numbered<a class="superscript" href="#label" id="footnote-reference-3" role="doc-noteref"><span class="fn-bracket">[</span>2<span class="fn-bracket">]</span></a>, or
  16 symbolic<a class="superscript" href="#footnote-3" id="footnote-reference-4" role="doc-noteref"><span class="fn-bracket">[</span>*<span class="fn-bracket">]</span></a>) or citation references (<a class="citation-reference" href="#cit2002" id="citation-reference-1" role="doc-biblioref">[CIT2002]</a>, <a class="citation-reference" href="#du2015" id="citation-reference-2" role="doc-biblioref">[DU2015]</a>).</p>
  17 <aside class="footnote-list superscript">
  18 <aside class="footnote superscript" id="footnote-1" role="doc-footnote">
  19 <span class="label"><span class="fn-bracket">[</span>1<span class="fn-bracket">]</span></span>
  20 <span class="backrefs">(<a role="doc-backlink" href="#footnote-reference-1">1</a>,<a role="doc-backlink" href="#footnote-reference-5">2</a>)</span>
  21 <p>A footnote contains body elements, consistently indented by at
  22 least 3 spaces.</p>
  23 <p>This is the footnote's second paragraph.</p>
  24 </aside>
  25 <aside class="footnote superscript" id="label" role="doc-footnote">
  26 <span class="label"><span class="fn-bracket">[</span>2<span class="fn-bracket">]</span></span>
  27 <span class="backrefs">(<a role="doc-backlink" href="#footnote-reference-3">1</a>,<a role="doc-backlink" href="#footnote-reference-6">2</a>)</span>
  28 <p>Footnotes may be numbered, either manually (as in<a class="superscript" href="#footnote-1" id="footnote-reference-5" role="doc-noteref"><span class="fn-bracket">[</span>1<span class="fn-bracket">]</span></a>) or
  29 automatically using a &quot;#&quot;-prefixed label.  This footnote has a
  30 label so it can be referred to from multiple places, both as a
  31 footnote reference (<a class="superscript" href="#label" id="footnote-reference-6" role="doc-noteref"><span class="fn-bracket">[</span>2<span class="fn-bracket">]</span></a>) and as a <a class="reference internal" href="#label">hyperlink reference</a>.</p>
  32 </aside>
  33 <aside class="footnote superscript" id="footnote-2" role="doc-footnote">
  34 <span class="label"><span class="fn-bracket">[</span><a role="doc-backlink" href="#footnote-reference-2">3</a><span class="fn-bracket">]</span></span>
  35 <p>This footnote is numbered automatically and anonymously using a
  36 label of &quot;#&quot; only.</p>
  37 <p>This is the second paragraph.</p>
  38 <p>And this is the third paragraph.</p>
  39 </aside>
  40 <aside class="footnote superscript" id="footnote-3" role="doc-footnote">
  41 <span class="label"><span class="fn-bracket">[</span><a role="doc-backlink" href="#footnote-reference-4">*</a><span class="fn-bracket">]</span></span>
  42 <p>Footnotes may also use symbols, specified with a &quot;*&quot; label.
  43 Here's a reference to the next footnote:<a class="superscript" href="#footnote-4" id="footnote-reference-7" role="doc-noteref"><span class="fn-bracket">[</span>†<span class="fn-bracket">]</span></a>.</p>
  44 </aside>
  45 <aside class="footnote superscript" id="footnote-4" role="doc-footnote">
  46 <span class="label"><span class="fn-bracket">[</span><a role="doc-backlink" href="#footnote-reference-7">†</a><span class="fn-bracket">]</span></span>
  47 <p>This footnote shows the next symbol in the sequence.</p>
  48 </aside>
  49 <aside class="footnote superscript" id="footnote-5" role="doc-footnote">
  50 <span class="label"><span class="fn-bracket">[</span>4<span class="fn-bracket">]</span></span>
  51 <p>Here's an unreferenced footnote, with a reference to a
  52 nonexistent footnote:<a class="superscript" href="#footnote-6" id="footnote-reference-8" role="doc-noteref"><span class="fn-bracket">[</span>5<span class="fn-bracket">]</span></a>.</p>
  53 </aside>
  54 </aside>
  55 <section id="citations">
  56 <h2>Citations<a class="self-link" title="link to this section" href="#citations"></a></h2>
  57 <div role="list" class="citation-list">
  58 <div class="citation" id="cit2002" role="doc-biblioentry">
  59 <span class="label"><span class="fn-bracket">[</span>CIT2002<span class="fn-bracket">]</span></span>
  60 <span class="backrefs">(<a role="doc-backlink" href="#citation-reference-1">1</a>,<a role="doc-backlink" href="#citation-reference-3">2</a>)</span>
  61 <p>Citations are text-labeled footnotes. They may be
  62 rendered separately and differently from footnotes.</p>
  63 </div>
  64 <div class="citation" id="du2015" role="doc-biblioentry">
  65 <span class="label"><span class="fn-bracket">[</span><a role="doc-backlink" href="#citation-reference-2">DU2015</a><span class="fn-bracket">]</span></span>
  66 <p><cite>Example document</cite>, Hometown: 2015.</p>
  67 </div>
  68 </div>
  69 <p>Here's a reference to the above, <a class="citation-reference" href="#cit2002" id="citation-reference-3" role="doc-biblioref">[CIT2002]</a>.</p>
  70 <aside class="footnote-list superscript">
  71 <aside class="footnote superscript" id="footnote-6" role="doc-footnote">
  72 <span class="label"><span class="fn-bracket">[</span><a role="doc-backlink" href="#footnote-reference-8">5</a><span class="fn-bracket">]</span></span>
  73 <p>this footnote is missing in the standard example document.</p>
  74 </aside>
  75 </aside>
  76 <p>Footnotes may contain block elements like lists<a class="superscript" href="#footnote-7" id="footnote-reference-9" role="doc-noteref"><span class="fn-bracket">[</span>6<span class="fn-bracket">]</span></a><a class="superscript" href="#list-note" id="footnote-reference-10" role="doc-noteref"><span class="fn-bracket">[</span>7<span class="fn-bracket">]</span></a><a class="superscript" href="#footnote-8" id="footnote-reference-11" role="doc-noteref"><span class="fn-bracket">[</span>8<span class="fn-bracket">]</span></a>,
  77 admonitions<a class="superscript" href="#footnote-9" id="footnote-reference-12" role="doc-noteref"><span class="fn-bracket">[</span>9<span class="fn-bracket">]</span></a>, or tables<a class="superscript" href="#footnote-10" id="footnote-reference-13" role="doc-noteref"><span class="fn-bracket">[</span>10<span class="fn-bracket">]</span></a>.</p>
  78 <aside class="footnote-list superscript">
  79 <aside class="footnote superscript" id="footnote-7" role="doc-footnote">
  80 <span class="label"><span class="fn-bracket">[</span><a role="doc-backlink" href="#footnote-reference-9">6</a><span class="fn-bracket">]</span></span>
  81 <ol class="arabic simple">
  82 <li><p>An ordered list</p></li>
  83 <li><p>in a footnote.</p></li>
  84 </ol>
  85 </aside>
  86 <aside class="footnote superscript" id="list-note" role="doc-footnote">
  87 <span class="label"><span class="fn-bracket">[</span>7<span class="fn-bracket">]</span></span>
  88 <span class="backrefs">(<a role="doc-backlink" href="#footnote-reference-10">1</a>,<a role="doc-backlink" href="#footnote-reference-14">2</a>)</span>
  89 <ul class="simple">
  90 <li><p>An unordered list (bullet list)</p></li>
  91 <li><p>in a footnote.</p></li>
  92 </ul>
  93 <p>And a trailing paragraph.</p>
  94 </aside>
  95 <aside class="footnote superscript" id="footnote-8" role="doc-footnote">
  96 <span class="label"><span class="fn-bracket">[</span><a role="doc-backlink" href="#footnote-reference-11">8</a><span class="fn-bracket">]</span></span>
  97 <dl class="field-list simple">
  98 <dt>Field<span class="colon">:</span></dt>
  99 <dd><p>list</p>
 100 </dd>
 101 <dt>with<span class="colon">:</span></dt>
 102 <dd><p>2 items.</p>
 103 </dd>
 104 </dl>
 105 </aside>
 106 <aside class="footnote superscript" id="footnote-9" role="doc-footnote">
 107 <span class="label"><span class="fn-bracket">[</span><a role="doc-backlink" href="#footnote-reference-12">9</a><span class="fn-bracket">]</span></span>
 108 <aside class="admonition note">
 109 <p class="admonition-title">Note</p>
 110 <p>This is a note in a note.</p>
 111 </aside>
 112 </aside>
 113 <aside class="footnote superscript" id="footnote-10" role="doc-footnote">
 114 <span class="label"><span class="fn-bracket">[</span><a role="doc-backlink" href="#footnote-reference-13">10</a><span class="fn-bracket">]</span></span>
 115 <table>
 116 <tbody>
 117 <tr><td><p>a</p></td>
 118 <td><p>table</p></td>
 119 </tr>
 120 <tr><td><p>in a</p></td>
 121 <td><p>footnote</p></td>
 122 </tr>
 123 </tbody>
 124 </table>
 125 </aside>
 126 </aside>
 127 <p>This<a class="superscript" href="#list-note" id="footnote-reference-14" role="doc-noteref"><span class="fn-bracket">[</span>7<span class="fn-bracket">]</span></a> is a second reference to the footnote containing
 128 a bullet. list.</p>
 129 </section>
 130 </main>
 131 </body>
 132 </html>