HTML page-2 with ALL HTML ELEMENTS (html template, html page template, full html, all html elements)

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<!-- Set the title of your site here -->
<title>HTML Patterns</title>

<meta name="author" content="mrmrs">
<meta name="description" content="Common HTML5 patterns I use.">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Link to your stylesheet here -->
<link rel="stylesheet" href="http://mrmrs.io:80/html/css/i.css">

<!-- Favicons and Touch Device Icons -->
<link rel="shortcut icon" href="http://mrmrs.io:80/html/favicon.ico">
<link rel="apple-touch-icon"
    href="http://mrmrs.io:80/html/touch-icon-iphone-precomposed.png">
<link rel="apple-touch-icon" sizes="72x72"
    href="http://mrmrs.io:80/html/touch-icon-ipad-precomposed.png">
<link rel="apple-touch-icon" sizes="114x114"
    href="http://mrmrs.io:80/html/touch-icon-iphone-retina-precomposed.png">
<link rel="apple-touch-icon" sizes="144x144"
    href="http://mrmrs.io:80/html/touch-icon-ipad-retina-precomposed.png">

</head>

<body>

    <header>
        <h1 class="mega-ns">HTML</h1>
        <h2 class="sth"> HTML </h2>
    </header>


    <header>
        <a href="" title="Site title"></a>
        <nav>
            <ul>
                <li><a href="#" title="Home">Home</a></li>
                <li><a href="#" title="About">About</a></li>
                <li><a href="#" title="Sign Up">Sign Up</a></li>
                <li><a href="#" title="Contact">Contact</a></li>
                <li><a href="#" title="Careers">Careers</a></li>
            </ul>
        </nav>
    </header>

    <section>
        <h1 class="other-class">Headings &amp; Copy</h1>
        <h1 class="other-class">First Header h1</h1>
        <p class="test-class">At vero eos et accusamus et iusto odio
            dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
            atque corrupti quos.</p>
        <h2>Second header h2</h2>
        <p class="test-class">Lorem ipsum dolor sit amet, consectetur
            adipisicing elit</p>
        <h3>Third header h3</h3>
        <p class="test-class">At vero eos et accusamus et iusto odio
            dignissimos </h4>
        <p class="test-class">Neque porro quisquam est, qui dolorem ipsum
            quia dolor sit amet, pariatur?"</p>
        <h5>Fifth header h5</h5>
        <p class="test-class">Sed ut perspiciatis unde omnis iste natus
            error sit voluptatem  voluptatem sequi nesciunt.
        </p>
        <h6>Sixth header h6</h6>
        <p class="test-class">At vero eos et accusamus et iusto odio
            dignissimos ducimus qui blanditiis </p>
    </section>

    <hr />

    <section>
        <h1 class="other-class">Links</h1>
        <a href="#">Sample text link</a>
        <a href="#">Sample button link</a>
    </section>

    <hr />

    <section>
        <h1 class="other-class">Lists</h1>
        <h2>Unordered list</h2>
        <ul>
            <li>Orange</li>
            <li>Apple</li>
            <li>Rhubarb</li>
            <li>Rasberry</li>
            <li>Blueberry</li>
            <li>Cherry</li>
        </ul>
        <h2>Ordered list</h2>
        <ol>
            <li>First</li>
            <li>Second</li>
            <li>Third</li>
            <li>Fourth</li>
            <li>Fifth</li>
            <li>Sixth</li>
        </ol>
        <h2>Definition list</h2>
        <dl>
            <dt>Kick</dt>
            <dd>808</dd>
            <dt>Snare</dt>
            <dd>909</dd>
        </dl>
        <dl>
            <dt>Maine</dt>
            <dd>Augusta</dd>
            <dt>California</dt>
            <dd>Sacremento</dd>
            <dt>Oregon</dt>
            <dd>Salem</dd>
            <dt>New York</dt>
            <dd>Albany</dd>
        </dl>
        <dl>
            <dt>Ascender</dt>
            <dd>The part of certain lowercase letters that extends above the
                x-height of a font.</dd>
            <dt>Font</dt>
            <dd>Traditionally, a complete set of characters for one typeface
                at one particular type size. Often used more loosely as a synonym
                for "typeface".</dd>
            <dt>Golden Section</dt>
            <dd>The ideal proportion according to the ancient Greeks. It is
                visualized as the medieval manuscripts.</dd>
        </dl>
    </section>

    <section>
        <h1 class="other-class">Forms</h1>


        <!-- FORM  -->

        <form>
            <fieldset>
                <!--
          Every fieldset must contain a legend.
          IE barfs if it's not there.
          It's no fun.
          -->
                <legend>Legend Example</legend>
                <div>
                    <label>Text Input Label</label> <input type="text" />
                    <p class="test-class">Help text if necessary.</p>
                </div>
                <div>
                    <label>Password</label> <input type="password" />
                    <p class="test-class">Error messages when appropriate.</p>
                </div>
                <div>
                    <label for="first-name">First Name</label> <input type="text"
                        id="first-name" />
                </div>
                <div>
                    <label for="last-name">Last Name</label> <input type="text"
                        id="last-name" />
                </div>
                <div>
                    <label for="email">Email</label> <input type="email" id="email" />
                </div>
                <div>
                    <label for="gender">Dropdown</label> <select>
                        <option>Option 1</option>
                        <option>Option 2</option>
                        <option>Option 3</option>
                    </select>
                </div>
                <div>
                    <label>Radio Buttons</label>
                    <ul>
                        <li><label><input type="radio" /> Label 1</label></li>
                        <li><label><input type="radio" /> Label 2</label></li>
                        <li><label><input type="radio" /> Label 3</label></li>
                    </ul>
                </div>
                <div>
                    <label for="url">URL Input</label> <input type="url"
                        placeholder="http://mrmrs.cc" />
                </div>
                <div>
                    <label>Text area</label>
                    <textarea></textarea>
                </div>
                <div>
                    <label><input type="checkbox" /> This is a checkbox.</label>
                </div>
                <div>
                    <input type="submit" value="Submit" />
                </div>
            </fieldset>
        </form>


    </section>
    <section>
        <h1 class="other-class">Buttons</h1>
        <button>A button</button>
        <button>A button</button>
        <button>A large button</button>
    </section>

    <hr />

    <!-- Article -->
    <section>
        <h1 class="other-class">An Example Article</h1>
        <article>
            <h1 class="other-class">Title</h1>
            <p class="test-class">
                Lorem ipsum dolor sit amet, <b>consectetur adipisicing elit</b>, sed
                do eiusmod
            </p>
            <blockquote>
                <p class="test-class">This is a GREAT pull quote.</p>
                <a href="#">- Author</a>
            </blockquote>
            <p class="test-class">Neque porro quisquam est, qui dolorem ipsum
                quia dolor sit amet

            <p class="test-class">At vero eos et accusamus et iusto odio
                dignissimos ducimus qui expedita distinctio.</p>
        </article>
    </section>

    <hr />

    <section>
        <h1 class="other-class">Code examples</h1>
        <code>
            <pre>
      sudo ipfw pipe 1 config bw 256KByte/s
      sudo ipfw add 1 pipe 1 src-port 3000
    </pre>
        </code>
    </section>

    <hr />
    <section>
        <h1 class="other-class">Footer</h1>
        <footer>
            <p class="test-class">
                Copyright 2013. Made with love by <a href="http://mrmrs.cc/"
                    title="MRMRS - Designer">mrmrs</a>.
            </p>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Jobs</a></li>
            </ul>
            <ul>
                <li><a href="http://twitter.com/" title=" on Twitter">Twitter</a>
                </li>
                <li><a href="http://pinterest.com/" title=" on Pinterest">Pinterest</a>
                </li>
                <li><a href="http://instagram.com/" title=" on Instagram">Instagram</a>
                </li>
                <li><a href="http://dribbbble.com/" title=" on Dribbble">Dribbble</a>
                </li>
                <li><a href="http://github.com/" title=" on Github">Github</a>
                </li>
            </ul>
        </footer>
    </section>

    <section>
        <h1 class="other-class">New hawtness</h1>
        <progress value="80" max="100">80 %</progress>
        <p class="test-class">
            We are this close to the goal:
            <meter min="0" max="1000" value="824">$824</meter>
            .
        </p>
    </section>

    <section>
        <header>
            <h1 class="other-class">Random Stuff</h1>
        </header>
        <small>This is for things like copyright info</small> <s>Content
            that isn't accurate or relevant anymore.</s> <span>Generic span
            wrapper</span> <abbr>HTML How to meet ladies</abbr>
        <p class="test-class">
            This is inline text with <sub>subscript</sub> and <sup>superscript</sup>
            elements.
        </p>

        <p class="test-class">
            <var>f</var>
            (
            <var>x</var>
            ) =
            <var>a</var>
            <sub>0</sub> +
            <var>a</var>
            <sub>1</sub>
            <var>x</var>
            +
            <var>a</var>
            <sub>2</sub>
            <var>x</var>
            <sup>2</sup>, where
            <var>a</var>
            <sup>2</sup> ≠ 0
        </p>

        <time datetime="2013-09-07" pubdate>07 September 2013</time>

    </section>


    <section>
        <figure>
            <img src="http://placekitten.com/g/960/320" alt="Figure Example">
            <figcaption>
                Photo of the sky at night. Original by <a
                    href="http://flickr.com/photos/heyitsadam/">@mrmrs</a>
            </figcaption>
        </figure>
    </section>

    <section>
        <!--
    http://www.w3.org/html/wg/drafts/html/master/text-level-semantics.html#the-samp-element
    -->
        <samp>
            <pre>
          /Sites/html master  ☠ ☢
          $  <kbd>ls -gto</kbd>
          total 104
          -rw-r--r--   1   10779 Jun  5 16:24 index.html
          -rw-r--r--   1    1255 Jun  5 16:00 _config.yml
          drwxr-xr-x  11     374 Jun  5 15:57 _site
          -rw-r--r--   1    1597 Jun  5 14:16 README.md
          drwxr-xr-x   5     170 Jun  5 14:15 _sass
          -rw-r--r--   1     564 Jun  4 15:59 Rakefile
          drwxr-xr-x   6     204 Jun  4 15:59 _includes
          drwxr-xr-x   4     136 Jun  4 15:59 _layouts
          drwxr-xr-x   3     102 Jun  4 15:59 _resources
          drwxr-xr-x   3     102 Jun  4 15:59 css
          -rw-r--r--   1    1977 Jun  4 15:59 favicon.icns
          -rw-r--r--   1    6518 Jun  4 15:59 favicon.ico
          -rw-r--r--   1    1250 Jun  4 15:59 touch-icon-ipad-precomposed.png
          -rw-r--r--   1    2203 Jun  4 15:59 touch-icon-ipad-retina-precomposed.png
          -rw-r--r--   1    1046 Jun  4 15:59 touch-icon-iphone-precomposed.png
          -rw-r--r--   1    1779 Jun  4 15:59 touch-icon-iphone-retina-precomposed.png
        </pre>
        </samp>
    </section>

    <!-- TABLE -->
    <section>
        <h1 class="other-class">Tables</h1>
        <!--
        From the HTML spec (http://www.w3.org/TR/html401/struct/tables.html)
        TFOOT must appear before TBODY within a TABLE definition so that user agents can
        render the foot before receiving all of the (potentially numerous) rows of data.
        The following summarizes which tags are required and which may be omitted:
        The TBODY start tag is always required except when the table contains only one
        table body and no table head or foot sections. The TBODY end tag may always be
        safely omitted.
        The start tags for THEAD and TFOOT are required when the table head and foot sections
        are present respectively, but the corresponding end tags may always be safely
        omitted.
        Conforming user agent parsers must obey these rules for reasons of backward
        compatibility.
        -->
        <table>
            <caption>This is a caption for a table</caption>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Date</th>
                    <th>Address</th>
                </tr>
            </thead>
            <tfoot>Table footer info
            </tfoot>
            <tbody>
                <tr>
                    <td>#999-32ac</td>
                    <td>First Name</td>
                    <td>13 May, 2013</td>
                    <td>999 Spruce Lane, Somewhere, CA 94101</td>
                </tr>
                <tr>
                    <td>#888-32dd</td>
                    <td>Sample Name</td>
                    <td>17 May, 1984</td>
                    <td>999 Spruce Lane, Somewhere, CA 94101</td>
                </tr>
            </tbody>
        </table>
    </section>

    <!-- FOOTER -->
    <section>
        <h1>Footer</h1>
        <footer>
            <small>© 2014 Some company name</small>
            <address>email@email.com</address>
        </footer>
    </section>

</body>
</html>