HTML Kitchen Sink, all of the HTML elements in order for styling, testing, etc..

kitchen-sink.html

<h1>HTML Kitchen Sink</h1>

<h2>a</h2>
<a href="#">a</a>
<br>


<h2>abbr</h2>
<abbr title="abbr">Mr. Mrs. Dr.</abbr>
<br>


<h2>address</h2>
<address>1234 Address St.</address>
<br>


<h2>article</h2>
<article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus et architecto officiis minus aspernatur, odio nobis ratione ex ducimus veniam voluptatibus totam, culpa magni beatae cumque nihil dolor enim. Nam.</article>
<br>


<h2>aside</h2>
<aside>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt non maxime rerum laboriosam, voluptas esse similique pariatur, autem numquam harum mollitia ex, maiores odit, nemo earum ipsam optio animi. Cupiditate!</aside>
<br>


<h2>audio</h2>
<audio controls>
<source src="https://s3.amazonaws.com/bw.temp/Difference.wav" type="audio/wav">
Nope
</audio>
<br>


<h2>b</h2>
<b>I CAN HAZ BOLD TEXT? KTHXBYE!</b>
<br>


<h2>blockquote</h2>
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam illum aperiam sed officia sit ex. Rem dolorum itaque quasi neque ea architecto, dicta molestiae corporis, voluptates dolore eligendi numquam. Veritatis?

- Foobar
</blockquote>
<br>


<h2>button</h2>
<button>I'm a button!</button>
<br>


<h2>canvas</h2>
<canvas></canvas>
<br>


<h2>caption</h2>
<table>
<caption>I'm a caption inside a table! Whoot!</caption>
</table>
<br>


<h2>cite</h2>
<p><cite>I'm cited text</cite> and I'm not.</p>
<br>


<h2>code</h2>
<p><code>I'm code</code> and I'm not</p>
<br>


<h2>div</h2>
<div>I'm a div.</div>
<br>


<h2>dl</h2>
<dl>
<dt>Data Thing</dt>
<dd>Data data</dd>
<dt>Data Thing</dt>
<dd>Data data</dd>
</dl>
<br>


<h2>del</h2>
<p>It's <del>gonna be</del> already been deleted!</p>
<br>


<h2>dfn</h2>
<p>The <dfn>dfn</dfn> tag represents the instance of a defined term.</p>
<br>


<h2>em</h2>
<p>Give your text <em>emphasis</em>!</p>
<br>


<h2>fieldset</h2>
<h2>legend</h2>
<form>
<fieldset>
  <legend>Fieldset:</legend>
  Purpose: <input type="text"><br>
</fieldset>
</form>
<br>



<h2>figure</h2>
<h2>figcaption</h2>
<figure>
<img src="http://placehold.it/128x128" alt="Image">
<figcaption>I'm a figure caption!</figcaption>
</figure>
<br>


<h2>footer</h2>
<footer>I'm a footer!</footer>
<br>



<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<br>


<h2>header</h2>
<header>I'm a header!</header>
<br>

<h2>hr</h2>
<hr>
<br>


<h2>i</h2>
<i>I'm italicized text!</i>
<br>


<h2>img</h2>
<img src="http://placehold.it/128x128" alt="Image">
<br>


<h2>label</h2>
<h2>input</h2>
<h2>select</h2>
<h2>textarea</h2>
<form>
I'm a form
<label>button</label> <input type="button"> <br>
<label>checkbox</label> <input type="checkbox"> <br>
<label>color</label> <input type="color"> <br>
<label>date</label> <input type="date"> <br>
<label>datetime</label> <input type="datetime"> <br>
<label>datetime-local</label> <input type="datetime-local"> <br>
<label>email</label> <input type="email"> <br>
<label>file</label> <input type="file"> <br>
<label>image</label> <input type="image"> <br>
<label>month</label> <input type="month"> <br>
<label>number</label> <input type="number"> <br>
<label>password</label> <input type="password"> <br>
<label>radio</label> <input type="radio"> <br>
<label>range</label> <input type="range"> <br>
<label>reset</label> <input type="reset"> <br>
<label>search</label> <input type="search"> <br>
<label>submit</label> <input type="submit"> <br>
<label>tel</label> <input type="tel"> <br>
<label>text</label> <input type="text"> <br>
<label>time</label> <input type="time"> <br>
<label>url</label> <input type="url"> <br>


<select>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>


<textarea>I'm a textarea</textarea>
</form>
<br>


<h2>ins</h2>
<p>Let me insert some text <ins>here</ins>!</p>
<br>


<h2>kbd</h2>
<p>Let's put some <kbd>keyboard input</kbd> there.</p>
<br>


<h2>keygen</h2>
<form>
<keygen name="security">
</form>
<br>


<h2>ol</h2>
<h2>ul</h2>
<h2>li</h2>
<ul>
<li>Hi</li>
</ul>
<ol>
Hi
</ol>
<br>


<h2>mark</h2>
<p>This is <mark>marked</mark> text.</p>
<br>


<h2>nav</h2>
<nav>
<a href="#">HTML</a> |
<a href="#">CSS</a> |
<a href="#">JavaScript</a> |
<a href="#">jQuery</a>
</nav>
<br>


<h2>pre</h2>
<pre>Pre formatted text!</pre>
<br>


<h2>q</h2>
<q>I'm a short quote</q>
<br>


<h2>s</h2>
<s>Stricken from the record!</s>
<br>


<h2>samp</h2>
<samp>Sample output from a computer program.</samp>
<br>

<h2>section</h2>
<section>I'm a section</section>
<br>


<h2>small</h2>
<small>I'm small text</small>
<br>


<h2>span</h2>
<span>I'm a span</span>
<br>


<h2>strong</h2>
<strong>I'm strong text</strong>
<br>


<h2>sub</h2>
<sub>I'm sub text</sub>
<br>


<h2>summary</h2>
<details>
<summary>I'm the summary in a details element</summary>
<p>I'm just a p tag with details</p>
</details>
<br>


<h2>sup</h2>
<sup>I'm sup text</sup>
<br>


<h2>table</h2>
<table>
<thead>
  <tr>
    <th>
      Table header in th
    </th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>
      Table body in td
    </td>
  </tr>
</tbody>
<tfoot>
  <tr>
    <td>
      Table footer in td
    </td>
  </tr>
</tfoot>
</table>
<br>


<h2>time</h2>
<time datetime="2008-02-14 20:00">I'm the date time of Valentine's Day</time>
<br>


<h2>u</h2>
<u>I'm underlined text</u>
<br>


<h2>var</h2>
<var>I'm a var</var>
<br>


<h2>video</h2>
<video width="320" height="240" controls>
<source src="http://static.videezy.com/system/resources/previews/000/002/669/original/star-trails.mp4" type="video/mp4">
</video>
<br>


<h2>wbr</h2>
<p>Veryveryveryveryveryveryveryvery<wbr>veryveryveryveryveryveryvery</p>
<br>