Html Elements: (CMS) HTML Elements

<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>Proin ac rhoncus diam, sit amet congue nibh. Nullam consectetur pretium erat vitae ornare. Quisque porta a dolor vel maximus. Nullam dictum risus pellentesque orci hendrerit commodo. Nunc et dolor sed turpis accumsan feugiat quis sed mi. Aliquam venenatis scelerisque neque id lobortis. Proin dignissim suscipit pharetra.
</p>
        <p>Proin ac <strong>rhoncus diam (&lt;strong&gt;)</strong>, sit amet <b>congue nibh (&lt;b&gt;)</b>. Nullam consectetur pretium erat vitae ornare. <em>Quisque porta (&lt;em&gt;)</em> a dolor vel maximus. <i>Nullam dictum (&lt;i&gt;)</i> risus pellentesque <u>orci hendrerit (&lt;u&gt;)</u> commodo. Nunc et dolor sed turpis <s>accumsan feugiat (&lt;s&gt;)</s> quis sed mi. Aliquam venenatis <mark>scelerisque neque (&lt;mark&gt;)</mark> id lobortis.
</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 >
    <img
      
      src="https://cep.tacc.utexas.edu/media/filer_public/69/85/698569d0-641f-4289-94c2-664389d626e8/spectrum-square-240px.png"
      alt="(sample image)"
    />
    <figcaption>
      I am a &lt;figcaption&gt; within a &lt;figure&gt;. 
      <span
        class="
          c-message
          c-message--type-warning
          c-message--scope-inline
          
          
        "
      >
      
        
        
        I may be wider than image. If so, should I wrap?
        
        
      
      </span>
  </figcaption>
</figure>
</dd>

      <dt>Figure <small>(Dynamic-Width Image)</small></dt>
      <dd><figure class="with-dynamic-width-image">
    <img
      
      src="https://cep.tacc.utexas.edu/media/filer_public/db/ff/dbff8f57-5b25-4273-8e6f-ae95462e7d19/spectrum-wide-1024px.png"
      alt="(sample image)"
    />
  <figcaption>
      I am a &lt;figcaption&gt; within a &lt;figure&gt;. 
      <span
        class="
          c-message
          c-message--type-warning
          c-message--scope-inline
          
          
        "
      >
      
        
        
        I may be wider than image. If so, should I wrap?
        
        
      
      </span>
  </figcaption>
</figure>
</dd>

      <dt>Blockquote</dt>
      <dd><blockquote
  
>
  <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>
</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>