Example HTML for when you need it

base.html

<h1 id="testtheme">Test Theme</h1>

<hr />

<div class="pill">headers</div>

<h1 id="header1">Header 1</h1>

<h2 id="header2">Header 2</h2>

<h3 id="header3">Header 3</h3>

<h4 id="header4">Header 4</h4>

<hr />

<div class="pill">basic typography</div>

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut maxime inventore quisquam iure, velit possimus magnam
  labore dolores sed libero, <em>fugiat amet rerum saepe harum</em> eos similique sequi minus veritatis.
</p>

<p>
  Lorem ipsum dolor sit amet, <strong>consectetur adipisicing elit</strong>. Aut maxime inventore quisquam iure, velit
  possimus magnam labore dolores sed libero, fugiat amet rerum saepe harum eos similique sequi minus veritatis.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut maxime inventore quisquam iure,
  <a href="#">velit possimus magnam</a> labore dolores sed libero, fugiat amet rerum saepe harum eos similique sequi
  minus veritatis.
</p>

<p>abcde­fghijklmnopqrstu­vwxyz­abcde­fghijklmnopqrstu­vwxyz­abcd</p>

<hr />
<div class="pill">bullet lists</div>

<ul>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Repellat vitae esse, consequatur veritatis?</li>
  <li>
    Quisquam molestias, sint labore unde.

    <ul>
      <li>Commodi aliquam reprehenderit sequi voluptatem.</li>
      <li>Fugiat, molestias quisquam earum officiis.</li>
      <li>Enim sed quis pariatur cumque.</li>
    </ul>
  </li>
  <li>Earum nemo, architecto dolores blanditiis.</li>
  <li>Ipsam iure hic vero nam.</li>
  <li>Fugiat mollitia est ipsum commodi!</li>
  <li>Illum harum voluptas atque officiis!</li>
</ul>

<hr />

<div class="pill">numbered lists</div>

<ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, autem.</li>
  <li>Rem, veniam tempora. Laborum quaerat repellat voluptatibus. Doloremque, iure, sed!</li>
  <li>Rerum est dolore quasi fuga tenetur officia magni dicta minima.</li>
  <li>Eaque neque dolore, voluptas ipsa officia magni omnis aut eligendi!</li>
  <li>Deleniti reiciendis dolor provident ea. Culpa voluptatem, deserunt veniam neque!</li>
  <li>
    Obcaecati commodi alias quod voluptatibus libero, placeat ipsum vero perspiciatis!

    <ol>
      <li>Perspiciatis officia dicta eos nulla minus.</li>
      <li>Optio assumenda amet enim neque ex.</li>
      <li>Perferendis neque error, non perspiciatis.</li>
    </ol>
  </li>
  <li>Perferendis cumque veniam ab recusandae repudiandae esse ratione neque, aspernatur.</li>
  <li>Eaque neque dolore, voluptas ipsa officia magni omnis aut eligendi!</li>
</ol>

<hr />

<div class="pill">definition lists</div>

<dl>
  <dt>Lorem ipsum dolor.</dt>
  <dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, ipsam.</dd>

  <dt>Dignissimos accusamus, facere?</dt>
  <dd>Dolore vel nulla possimus accusantium quae accusamus minima, repellat qui.</dd>

  <dt>Facere, earum, voluptas.</dt>
  <dd>Dolorum sit aliquam culpa reiciendis minima non ipsam expedita accusantium.</dd>
</dl>

<hr />

<div class="pill">blockquote</div>

<blockquote>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis deserunt earum vel placeat velit qui autem illum
    amet incidunt odit, laudantium nostrum, itaque eius quaerat.
  </p>
</blockquote>

<hr />

<div class="pill">table</div>

<table>
  <colgroup>
    <col style="text-align:left;" />
    <col style="text-align:left;" />
    <col style="text-align:left;" />
  </colgroup>

  <thead>
    <tr>
      <th style="text-align:left;">Shutter speed</th>
      <th style="text-align:left;">f/stop</th>
      <th style="text-align:left;">ISO</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td style="text-align:left;">1 second</td>
      <td style="text-align:left;">f/2.8</td>
      <td style="text-align:left;">200</td>
    </tr>
    <tr>
      <td style="text-align:left;">1 second</td>
      <td style="text-align:left;">f/3.2</td>
      <td style="text-align:left;">400</td>
    </tr>
    <tr>
      <td style="text-align:left;">1 second</td>
      <td style="text-align:left;">f/5.6</td>
      <td style="text-align:left;">800</td>
    </tr>
    <tr>
      <td style="text-align:left;">1 second</td>
      <td style="text-align:left;">f/6.3</td>
      <td style="text-align:left;">1600</td>
    </tr>
  </tbody>
</table>

<hr />

<div class="pill">Code</div>

<p>Here is an example of some <code>inline code</code> and what follows is an example of a codeblock:</p>

<pre><code class="(null)">code {
  font-family: &apos;Monaco&apos;;
  display: block;
  background: #eee;
  padding: 1em;
  font-size: 13px;
  border: 1px solid #2e2e2e;
  background-color: #232326;
}</code></pre>

<hr />

<div class="pill">Images &amp; Figures</div>

<p>This is a generic image.</p>

<figure>
  <img src="https://farm6.staticflickr.com/5342/17419074024_a6c75926e0_h.jpg" alt="" />
</figure>

<p>This is a generic image via markdown with caption.</p>

<figure>
  <img
    src="https://farm3.staticflickr.com/2900/14420438676_7263d85273_o.jpg"
    alt="This is a really super awesome-town caption"
  />
  <figcaption>This is a really super awesome-town caption</figcaption>
</figure>

<figure>
  <img
    src="https://farm3.staticflickr.com/2897/13887748319_75b3f5603c_h.jpg"
    alt="Fujifilm X100S • ƒ/4.0 • 23.0 mm • 1/15 • ISO 800"
  />
  <figcaption>Fujifilm X100S • ƒ/4.0 • 23.0 mm • 1/15 • ISO 800</figcaption>
</figure>

<figure>
  <img src="https://farm8.staticflickr.com/7438/13890491698_1d45a12e24_h.jpg" alt="2011-04-23-IMG_6817_2" />
  <figcaption>2011&#8211;04&#8211;23-IMG_6817_2</figcaption>
</figure>

<figure>
  <img src="https://farm3.staticflickr.com/2935/14065269902_fd002a697e_h.jpg" alt="2010-10-29-IMG_0177_299" />
  <figcaption>2010&#8211;10&#8211;29-IMG_0177_299</figcaption>
</figure>

<figure>
  <img src="https://farm8.staticflickr.com/7064/14078299004_02fbd8db1e_h.jpg" alt="2013-07-23-IMG_5351" />
  <figcaption>2013&#8211;07&#8211;23-IMG_5351</figcaption>
</figure>