spec.html5

<h2 id="sec:expt" class="class1 class2" data-key="value">0.1 Experiments with pandoc figures (ˈjuːnɪˌkəʊd!)</h2>
<figure>
<img src="image.png" title="link text" alt="Figure 1: a figure that can be referred to (ˈjuːnɪˌkəʊd!)" id="fig:attr" class="class1 class2" data-key="value" /><figcaption>Figure 1: a figure that can be referred to (ˈjuːnɪˌkəʊd!)</figcaption>
</figure>
<p>Here is a reference to <a href="#fig:attr">Figure 1</a> and here is one to <a href="#fig:attr2">Figure 2</a>.</p>
<p>Here is reference to the section called <a href="#sec:expt">Section 0.1</a>.</p>
<figure>
<img src="image.png" title="link text" alt="Figure 2: another figure that can be referred to (ˈjuːnɪˌkəʊd!)" id="fig:attr2" /><figcaption>Figure 2: another figure that can be referred to (ˈjuːnɪˌkəʊd!)</figcaption>
</figure>
<figure>
<img src="image.png" alt="Figure 3: figure with no attr and no link text (ˈjuːnɪˌkəʊd!)" id="___fig___3" /><figcaption>Figure 3: figure with no attr and no link text (ˈjuːnɪˌkəʊd!)</figcaption>
</figure>
<p>Here is <a href="#eq:silly">Equation 1</a>:</p>
<table>
<caption><span id="eq:silly" class="math"></span></caption>
<colgroup>
<col style="width: 90%" />
<col style="width: 10%" />
</colgroup>
<tbody>
<tr class="odd">
<td style="text-align: center;"><br /><span class="math display">2 + 2 = 5</span><br /></td>
<td style="text-align: right;">(1)</td>
</tr>
</tbody>
</table>
<h2 id="unnumbered-section" class="unnumbered">Unnumbered Section</h2>
<figure>
<img src="image.png" title="link text" alt="no numbering here (ˈjuːnɪˌkəʊd!)" id="fig:nonum" class="unnumbered" /><figcaption>no numbering here (ˈjuːnɪˌkəʊd!)</figcaption>
</figure>
<h2 id="multiple-references" class="unnumbered">Multiple references</h2>
<p>We can refer to multiple things of the same type: Figures <a href="#fig:attr">1</a> and <a href="#fig:attr2">2</a>.</p>
<p>Or to multiple things of mixed type: <a href="#fig:attr">Figure 1</a>, <a href="#fig:attr2">Figure 2</a>, <a href="#sec:expt">Section 0.1</a>, and <a href="#eq:silly">Equation 1</a>.</p>
<p>But if there are any missing keys, nothing will happen: <span class="citation" data-cites="fig:attr fig:idontexist">[@fig:attr; @fig:idontexist]</span>.</p>
<h2 id="tables">0.2 Tables</h2>
<div id="mytable">
<table>
<caption>Table 1: This is my caption.</caption>
<thead>
<tr class="header">
<th>1</th>
<th>2</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>a</td>
<td>b</td>
</tr>
</tbody>
</table>
</div>
<table>
<caption>Another caption.</caption>
<thead>
<tr class="header">
<th>1</th>
<th>2</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>a</td>
<td>b</td>
</tr>
</tbody>
</table>
<p>Does this work? (See <a href="#mytable">Table 1</a>.)</p>