<dl>

  <dt>Forms</dt>
  <dd>
    <form>
      <label>&lt;input&gt;</label>
      <input />
      <label>&lt;select&gt;</label>
      <select>
        <option value="" selected="">
          Please select a dinosaur
        </option>
        <optgroup label="Theropods">
            <option>Tyrannosaurus</option>
            <option>Velociraptor</option>
            <option>Deinonychus</option>
        </optgroup>
        <optgroup label="Sauropods">
            <option>Diplodocus</option>
            <option>Saltasaurus</option>
            <option>Apatosaurus</option>
        </optgroup>
      </select>
      <label>&lt;textarea&gt;</label>
      <textarea></textarea>
      <button type="submit">Submit</button>
      <button type="reset">Reset</button>
      <button type="clear">Clear</button>
      <button type="button">Button</button>
    </form>
  </dd>

  <dt>Text Content</dt>
  <dd>
    <dl>
      <dt>Paragraphs &amp; Inline Text Semantics</dt>
      <dd>
        <p>{{> @text-of-one-paragraph-medium }}</p>
        <p>{{> @text-of-one-paragraph-with-tags }}</p>
      </dd>

      <dt>Paragraph then List <small>(reduced spacing)</small></dt>
      <dd>
        <p>This paragraph is immediately followed by a list with reduced spacing:</p>
        <ul>
          <li>First item in the list</li>
          <li>Second item in the list</li>
          <li>Third item in the list</li>
        </ul>
        <p>Another paragraph followed by an ordered list:</p>
        <ol>
          <li>First ordered item</li>
          <li>Second ordered item</li>
        </ol>
        <p>And a paragraph followed by a definition list:</p>
        <dl class="no-demo-styles">
          <dt>Term</dt>
          <dd>Definition of the term</dd>
        </dl>
      </dd>

      <dt>Lists</dt>
      <dd>
        <dl>
          <dt>Unordered</dt>
          <dd>
            <ul>
              <li>LX 1234</li>
              <li>LOVE 45</li>
              <li>OLD 555</li>
            </ul>
          </dd>
          <dt>Ordered</dt>
          <dd>
            <ul>
              <li>One Fish</li>
              <li>Two Fish</li>
              <li>Red Fish</li>
              <li>Blue Fish</li>
            </ul>
          </dd>
          <dt>Definition List</dt>
          <dd>
            <dl class="no-demo-styles">
              <dt>CSS</dt><dd>Cascading Stylesheet</dd>
              <dt>HTML</dt><dd>Hypertext Markup Language</dd>
              <dt>JSON</dt><dd>JavaScript Object Notation</dd>
            </dl>
          </dd>
        </dl>
      </dd>

      <dt>Figure <small>(Narrow Image)</small></dt>
      <dd>{{> @figure }}</dd>

      <dt>Figure <small>(Dynamic-Width Image)</small></dt>
      <dd>{{> @figure class="with-dynamic-width-image" use-image-wide=true }}</dd>

      <dt>Blockquote</dt>
      <dd>{{> @blockquote }}</dd>
    </dl>

    <dl>
      <dt>Demarcating Edits</dt>
      <dd>
        <dl>
          <dt>Inline Inserted Text</dt>
          <dd>
            <p>This paragraph contains <ins>some inserted text</ins> to demonstrate the styling.</p>
          </dd>
          <dt>Block Inserted Content</dt>
          <dd>
            <div class="ins-block">
              <p>This is a block of inserted content that demonstrates the .ins-block class styling.</p>
              <p>It can contain multiple paragraphs and other content.</p>
              <p>The final paragraph should not have extra bottom margin.</p>
            </div>
          </dd>
        </dl>
      </dd>
    </dl>
  </dd>
</dl>
