HTML Kitchensink

kitchensink.html

<h1>Level 1 heading</h1>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.</p>

<h2>Level 02 Heading</h2>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.</p>

<h3>Level 03 Heading</h3>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.</p>

<h4>Level 04 Heading</h4>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.</p>

<h5>Level 05 Heading</h5>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.</p>

<h6>Level 06 Heading</h6>
<p>Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.</p>

<blockquote>
  <p>Paragraph inside Blockquote: Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Sed scelerisque sagittis lorem.</p>
</blockquote>

<address>
  Address: Example address 224, Sweden
</address>

<pre>
  <strong>Preformated:</strong>Testing one row
  and another
</pre>

<p>
  I am <a href="?abc123">the a tag</a> example<br>
  I am <b>the b tag</b> example<br>
  I am <cite>the cite tag</cite> example<br>
  I am <code>the code tag</code> example<br>
  I am <em>the em tag</em> example<br>
  I am <i>the i tag</i> example<br>
  I am <small>the small tag</small> example<br>
  I am <span>the span tag</span> example<br>
  I am <strong>the strong tag</strong> example<br>
</p>

<hr>

<ul>
  <li>Unordered list 01</li>
  <li>Unordered list 02</li>
  <li>Unordered list 03
    <ul>
      <li>Unordered list inside list level 2</li>
      <li>Unordered list inside list level 2
        <ul>
          <li>Unordered list inside list level 3</li>
          <li>Unordered list inside list level 3</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<ol>
  <li>Ordered list 01</li>
  <li>Ordered list 02</li>
  <li>Ordered list 03
    <ol>
      <li>Ordered list inside list level 2</li>
      <li>Ordered list inside list level 2
        <ol>
          <li>Ordered list inside list level 3</li>
          <li>Ordered list inside list level 3</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

<dl>
  <dt>Description list title 01</dt>
  <dd>Description list description 01</dd>
  <dt>Description list title 02</dt>
  <dd>Description list description 02</dd>
  <dd>Description list description 03</dd>
</dl>

<table>
  <caption>
    Table Caption
  </caption>

  <thead>
    <tr>
      <th>Table head th</th>
      <td>Table head td</td>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <th>Table foot th</th>
      <td>Table foot td</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <th>Table body th</th>
      <td>Table body td</td>
    </tr>

    <tr>
      <td>Table body td</td>
      <td>Table body td</td>
    </tr>
  </tbody>
</table>

<form action="#">
  <fieldset>
    <legend>Form legend</legend>

    <div>
      <label for="f1">Text input:</label><br>
      <input type="text" id="f1" value="input text">
    </div>

    <div>
      <label for="pw">Password input:</label><br>
      <input type="password" id="pw" value="password">
    </div>

    <div>
      <label for="f2">Radio input:</label><br>
      <input type="radio" id="f2">
    </div>

    <div>
      <label for="f3">Checkbox input:</label><br>
      <input type="checkbox" id="f3">
    </div>

    <div>
      <label for="f4">Select field:</label><br>
      <select id="f4">
        <option>
          Option 01
        </option>

        <option>
          Option 02
        </option>
      </select>
    </div>

    <div>
      <label for="f5">Textarea:</label><br>
      <textarea id="f5" cols="30" rows="5">Textarea text</textarea>
    </div>

    <div>
      <label for="f6">Input Button:</label><br>
      <input type="button" id="f6" value="button text">
    </div>

    <div>
      <label>Button Elements: <span class="small quiet">Can use &lt;button&gt; tag or &lt;a class="button"&gt;</span></label><br>
      <button class="button positive"><img src="img/icons/tick.png" alt=""> Save</button> <a class="button" href="#"><img src="img/icons/key.png" alt=""> Change Password</a> <a href="#" class="button negative"><img src="img/icons/cross.png" alt=""> Cancel</a>
    </div>
  </fieldset>
</form>