v0.2.2

* miller345-patch-1:
  update formatting and IDs
  Fixed duplicate IDs

CHANGELOG.md

@@ -0,0 +1,15 @@
+# 0.2.2 (May 13, 2015)
+
+- Fix validation errors.
+
+# 0.2.1 (March 21, 2015)
+
+- Fix duplicate IDs and formatting.
+
+# 0.2.0 (April 8, 2014)
+
+- add `<caption>` element to `<table>` examples.
+
+# 0.1.0 (April 4, 2014)
+
+- Initial release!

CONTRIBUTING.md

@@ -0,0 +1,114 @@
+# Contributing to this project
+
+*This information is heavily based on [this CONTRIBUTING.md document](https://github.com/necolas/normalize.css/edit/master/CONTRIBUTING.md).*
+
+Before making a contribution, please take a moment to review this document. It will make the process easier and more enjoyable for everyone involved.
+
+Following the guidelines in this document shows that you respect the time of the maintainers of this open-source project. In return, maintainers should show their respect for you by addressing your requests, issues, and contributions in a timely fashion.
+
+## Submitting issues
+
+GitHub’s built-in issue tracker is the preferred channel for bug reports, feature requests, and submitting pull requests.
+
+**Do not** use the issue tracker for personal support questions. They will probably not be addressed.
+**Do not** derail or troll issues. Please try to keep things on topic and be respectful to others.
+
+## Bug reports
+
+*Demo or it didn’t happen.*
+
+A bug is a problem that you can demonstrate to a maintainer on this open-source project. Good bug reports are very helpful, and encouraged!
+
+If you are thinking about reporting a bug, please do the following:
+
+1. **Search for existing issues** - it could have already been reported.
+2. **Check for fixes** - try to reproduce the bug using the latest release on the `master` branch in the repository.
+3. **If the bug persists**, submit an issue and create a live example of the bug using a public service like [jsFiddle](http://jsfiddle.net) or [Codepen](http://codepen.io). Link to your example in the issue that you submit.
+
+Please be as detailed as possible. Ask yourself: What is your environment? What steps will reproduce the issue? What browser(s) and OS experience the problem? What would you expect to be the outcome?
+
+## Feature requests
+
+Feel free to request whatever you like, but please take a moment to think about whether your request is within the scope of the project. You should make a strong case for your request, otherwise the maintaining developers will probably not consider it. Provide as much detail as you can.
+
+## Pull requests
+
+Good pull requests are awesome. Bad pull requests are a headache. They should always be limited by the scope of the request, and avoid including unrelated commits.
+
+**Please file an issue first** before deciding to do a lot of work. Otherwise, you run the risk of wasting time working on something that might not get merged into the project.
+
+Follow this process if you’d like your work to be considered for inclusion in the project:
+
+1. [Fork](http://help.github.com/fork-a-repo/) the project, clone your fork,
+   and configure the remotes:
+
+   ```bash
+   # Clone your fork of the repo into the current directory
+   git clone https://github.com/<your-username>/html5-test-page
+   # Navigate to the newly cloned directory
+   cd html5-test-page
+   # Assign the original repo to a remote called "upstream"
+   git remote add upstream https://github.com/cbracco/html5-test-page
+   ```
+
+2. If you cloned a while ago, get the latest changes from upstream:
+
+   ```bash
+   git checkout master
+   git pull upstream master
+   ```
+
+3. **Never work directly on `master`**. Create a new topic branch (off the latest version of `master`) to contain your feature, change, or fix:
+
+   ```bash
+   git checkout -b <topic-branch-name>
+   ```
+
+4. Commit your changes in logical chunks. Please adhere to these [git commit
+   message conventions](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
+   or your code is unlikely be merged into the main project. Use Git’s
+   [interactive rebase](https://help.github.com/articles/interactive-rebase)
+   feature to tidy up your commits before making them public.
+
+   Please add a test to the `test.html` file if appropriate, and test
+   your change(s) in all supported browsers.
+
+5. Locally rebase the upstream development branch into your topic branch:
+
+   ```bash
+   git pull --rebase upstream master
+   ```
+
+6. Push your topic branch up to your fork:
+
+   ```bash
+   git push origin <topic-branch-name>
+   ```
+
+10. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/) with a clear title and description.
+
+**IMPORTANT**: By submitting a patch, you agree to allow the project owner to
+license your work under the same license as that used by the project.
+
+## Maintainers
+
+If you have commit access, please follow this process for merging patches and
+cutting new releases.
+
+### Accepting patches
+
+1. Check that a patch is within the scope and philosophy of the project.
+2. Check that a patch has any necessary tests and a proper, descriptive commit
+   message.
+3. Test the patch locally.
+4. Do not use GitHub’s merge button. Apply the patch to `master` locally
+   (either via `git am` or by checking the whole branch out). Amend minor
+   problems with the author’s original commit if necessary. Then push to GitHub.
+
+### Releasing a new version
+
+1. Include all new functional changes in the CHANGELOG.
+2. Use a dedicated commit to increment the version. The version needs to be added to the `README.md` and `CHANGELOG.md` (inc. date) files.
+3. The commit message must be of `v0.0.0` format.
+4. Create an annotated tag for the version: `git tag -m "v0.0.0" 0.0.0`.
+5. Push the changes and tags to GitHub: `git push --tags origin master`

LICENSE.md

@@ -0,0 +1,21 @@
+Copyright (c) Chris Bracco
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,4 +1,31 @@
-html5-test-page
-===============
+# HTML5 Test Page
 
-A page filled with common HTML elements to be used for testing purposes. Useful when building CSS systems for projects big and small.
+This is a test page filled with common HTML elements to be used to provide visual feedback whilst building CSS systems and frameworks.
+
+I have not been able to find a sufficient test page out there, so I made one.
+
+The HTML elements are loosely categorized as either text, embedded content, or form elements.
+
+## Versioning
+
+HTML5 Test Page will be maintained using the [Semantic Versioning](http://semver.org/) guidelines. From here on out, releases will be numbered using the following format:
+
+`major.minor.patch`
+
+* Breaking backwards compatibility increments `major`, while resetting `minor` and `patch`.
+* New code that does not break backwards compatibility increments `minor`, while resetting `patch`.
+* Bug fixes and other small changes increment `patch`.
+
+## Contributing
+
+Do you have ideas or requests? Please [submit an issue](https://github.com/cbracco/html5-test-page/issues/new) here on GitHub. Or, if you are feeling especially motivated, write some code and submit a pull request!
+
+When submitting a pull request, **please checkout a new feature branch, and submit your pull request from it.** Do not submit pull requests from your `master` branch. Please and thank you.
+
+## License
+
+HTML Test Page is licensed under the MIT Open Source license. For more information, see the [LICENSE.md](https://github.com/cbracco/html5-test-page/blob/master/LICENSE.md) file in this repository.
+
+## Colophon
+
+Made by [@cbracco](http://cbracco.me).

test.html

@@ -0,0 +1,469 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>HTML5 Test Page</title>
+</head>
+<body>
+    <div id="top" class="page" role="document">
+        <header role="banner">
+            <h1>HTML5 Test Page</h1>
+            <p>This is a test page filled with common HTML elements to be used to provide visual feedback whilst building CSS systems and frameworks.</p>
+        </header>
+
+        <nav role="navigation">
+            <ul>
+                <li>
+                    <a href="#text">Text</a>
+                    <ul>
+                        <li><a href="#text__headings">Headings</a></li>
+                        <li><a href="#text__paragraphs">Paragraphs</a></li>
+                        <li><a href="#text__blockquotes">Blockquotes</a></li>
+                        <li><a href="#text__lists">Lists</a></li>
+                        <li><a href="#text__hr">Horizontal rules</a></li>
+                        <li><a href="#text__tables">Tabular data</a></li>
+                        <li><a href="#text__syntax">Syntax</a></li>
+                        <li><a href="#text__inline">Inline elements</a></li>
+                    </ul>
+                </li>
+                <li>
+                    <a href="#embedded">Embedded content</a>
+                    <ul>
+                        <li><a href="#embedded__images">Images</a></li>
+                        <li><a href="#embedded__audio">Audio</a></li>
+                        <li><a href="#embedded__video">Video</a></li>
+                        <li><a href="#embedded__canvas">Canvas</a></li>
+                        <li><a href="#embedded__progress">Progress bars</a></li>
+                        <li><a href="#embedded__svg">Inline SVG</a></li>
+                        <li><a href="#embedded__iframes">IFrames</a></li>
+                    </ul>
+                </li>
+                <li>
+                    <a href="#forms">Form elements</a>
+                    <ul>
+                        <li><a href="#forms__text">Text fields</a></li>
+                        <li><a href="#forms__select">Select menus</a></li>
+                        <li><a href="#forms__checkbox">Checkboxes</a></li>
+                        <li><a href="#forms__radio">Radio buttons</a></li>
+                        <li><a href="#forms__html5">HTML5 inputs</a></li>
+                        <li><a href="#forms__action">Action buttons</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </nav>
+
+        <main role="main">
+            <section id="text">
+                <header><h1>Text</h1></header>
+
+                <article id="text__headings">
+                    <header>
+                        <h1>Headings</h1>
+                    </header>
+
+                    <div>
+                        <h1>Heading 1</h1>
+                        <h2>Heading 2</h2>
+                        <h3>Heading 3</h3>
+                        <h4>Heading 4</h4>
+                        <h5>Heading 5</h5>
+                        <h6>Heading 6</h6>
+                    </div>
+
+                    <footer><p><a href="#top">[Top]</a></p></footer>
+                </article>
+
+                <article id="text__paragraphs">
+                    <header><h1>Paragraphs</h1></header>
+
+                    <div>
+                        <p>A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
+                    </div>
+
+                    <footer><p><a href="#top">[Top]</a></p></footer>
+                </article>
+
+                <article id="text__blockquotes">
+                    <header><h1>Blockquotes</h1></header>
+
+                    <div>
+                        <blockquote>
+                            <p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.</p>
+                            <p>It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.</p>
+                            <cite><a href="#!">Said no one, ever.</a></cite>
+                        </blockquote>
+                    </div>
+
+                    <footer><p><a href="#top">[Top]</a></p></footer>
+                </article>
+
+                <article id="text__lists">
+                    <header><h1>Lists</h1></header>
+
+                    <div>
+                        <h3>Definition list</h3>
+                        <dl>
+                            <dt>Definition List Title</dt>
+                            <dd>This is a definition list division.</dd>
+                        </dl>
+
+                        <h3>Ordered List</h3>
+                        <ol>
+                            <li>List Item 1</li>
+                            <li>List Item 2</li>
+                            <li>List Item 3</li>
+                        </ol>
+
+                        <h3>Unordered List</h3>
+                        <ul>
+                            <li>List Item 1</li>
+                            <li>List Item 2</li>
+                            <li>List Item 3</li>
+                        </ul>
+                    </div>
+
+                    <footer><p><a href="#top">[Top]</a></p></footer>
+                </article>
+
+                <article id="text__hr">
+                    <header><h1>Horizontal rules</h1></header>
+
+                    <div>
+                        <hr>
+                    </div>
+
+                    <footer><p><a href="#top">[Top]</a></p></footer>
+                </article>
+
+                <article id="text__tables">
+                    <header><h1>Tabular data</h1></header>
+
+                    <table>
+                        <caption>Table Caption</caption>
+                        <thead>
+                            <tr>
+                                <th>Table Heading 1</th>
+                                <th>Table Heading 2</th>
+                                <th>Table Heading 3</th>
+                                <th>Table Heading 4</th>
+                                <th>Table Heading 5</th>
+                            </tr>
+                        </thead>
+
+                        <tfoot>
+                            <tr>
+                                <th>Table Footer 1</th>
+                                <th>Table Footer 2</th>
+                                <th>Table Footer 3</th>
+                                <th>Table Footer 4</th>
+                                <th>Table Footer 5</th>
+                            </tr>
+                        </tfoot>
+
+                        <tbody>
+                            <tr>
+                                <td>Table Cell 1</td>
+                                <td>Table Cell 2</td>
+                                <td>Table Cell 3</td>
+                                <td>Table Cell 4</td>
+                                <td>Table Cell 5</td>
+                            </tr>
+                            <tr>
+                                <td>Table Cell 1</td>
+                                <td>Table Cell 2</td>
+                                <td>Table Cell 3</td>
+                                <td>Table Cell 4</td>
+                                <td>Table Cell 5</td>
+                            </tr>
+                            <tr>
+                                <td>Table Cell 1</td>
+                                <td>Table Cell 2</td>
+                                <td>Table Cell 3</td>
+                                <td>Table Cell 4</td>
+                                <td>Table Cell 5</td>
+                            </tr>
+                            <tr>
+                                <td>Table Cell 1</td>
+                                <td>Table Cell 2</td>
+                                <td>Table Cell 3</td>
+                                <td>Table Cell 4</td>
+                                <td>Table Cell 5</td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <footer><p><a href="#top">[Top]</a></p></footer>
+                </article>
+
+                <article id="text__syntax">
+                    <header><h1>Syntax</h1></header>
+
+                    <div>
+                        <p><strong>Keyboard input:</strong> <kbd>Cmd</kbd></p>
+                        <p><strong>Inline code:</strong> <code>&lt;div&gt;code&lt;/div&gt;</code></p>
+                        <p><strong>Sample output:</strong> <samp>This is sample output from a computer program.</samp></p>
+
+                        <h2>Pre-formatted text</h2>
+
+                        <pre>P R E F O R M A T T E D T E X T
+! " # $ % &amp; ' ( ) * + , - . /
+0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
+@ A B C D E F G H I J K L M N O
+P Q R S T U V W X Y Z [ \ ] ^ _
+` a b c d e f g h i j k l m n o
+p q r s t u v w x y z { | } ~ </pre>
+                    </div>
+
+                    <footer><p><a href="#top">[Top]</a></p></footer>
+                </article>
+
+                <article id="text__inline">
+                    <header><h1>Inline elements</h1></header>
+
+                    <div>
+                        <p><a href="#!">This is a text link</a>.</p>
+
+                        <p><strong>Strong is used to indicate strong importance.</strong></p>
+
+                        <p><em>This text has added emphasis.</em></p>
+
+                        <p>The <b>b element</b> is stylistically different text from normal text, without any special importance.</p>
+
+                        <p>The <i>i element</i> is text that is offset from the normal text.</p>
+
+                        <p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation.</p>
+
+                        <p><del>This text is deleted</del> and <ins>This text is inserted</ins>.</p>
+
+                        <p><s>This text has a strikethrough</s>.</p>
+
+                        <p>Superscript<sup>®</sup>.</p>
+
+                        <p>Subscript for things like H<sub>2</sub>O.</p>
+
+                        <p><small>This small text is small for for fine print, etc.</small></p>
+
+                        <p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
+
+                        <p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q></p>
+
+                        <p><cite>This is a citation.</cite>
+
+                        </p><p>The <dfn>dfn element</dfn> indicates a definition.</p>
+
+                        <p>The <mark>mark element</mark> indicates a highlight.</p>
+
+                        <p>The <var>variable element</var>, such as <var>x</var> = <var>y</var>.</p>
+
+                        <p>The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></p>
+                    </div>
+
+                    <footer><p><a href="#top">[Top]</a></p></footer>
+                </article>
+            </section>
+
+            <section id="embedded">
+                <header><h1>Embedded content</h1></header>
+
+                <article id="embedded__images">
+                    <header><h2>Images</h2></header>
+                    <div>
+                        <h3>No <code>&lt;figure&gt;</code> element</h3>
+                        <p><img src="http://placekitten.com/480/480" alt="Image alt text"></p>
+                        <h3>Wrapped in a <code>&lt;figure&gt;</code> element, no <code>&lt;figcaption&gt;</code></h3>
+                        <figure><img src="http://placekitten.com/420/420" alt="Image alt text"></figure>
+                        <h3>Wrapped in a <code>&lt;figure&gt;</code> element, with a <code>&lt;figcaption&gt;</code></h3>
+                        <figure>
+                            <img src="http://placekitten.com/360/360" alt="Image alt text">
+                            <figcaption>Here is a caption for this image.</figcaption>
+                        </figure>
+                    </div>
+                    <footer><p><a href="#top">[Top]</a></p></footer>
+                </article>
+
+                <article id="embedded__audio">
+                    <header><h2>Audio</h2></header>
+                    <div><audio controls="">audio</audio></div>
+                    <footer><p><a href="#top">[Top]</a></p></footer>
+                </article>
+
+                <article id="embedded__video">
+                    <header><h2>Video</h2></header>
+                    <div><video controls="">video</video></div>
+                    <footer><p><a href="#top">[Top]</a></p></footer>
+                </article>
+
+                <article id="embedded__canvas">
+                    <header><h2>Canvas</h2></header>
+                    <div><canvas>canvas</canvas></div>
+                    <footer><p><a href="#top">[Top]</a></p></footer>
+                </article>
+
+                <article id="embedded__progress">
+                    <header><h2>Progress bars</h2></header>
+                    <div><progress>progress</progress></div>
+                    <footer><p><a href="#top">[Top]</a></p></footer>
+                </article>
+
+                <article id="embedded__svg">
+                    <header><h2>Inline SVG</h2></header>
+                    <div><svg width="100px" height="100px"><circle cx="100" cy="100" r="100" fill="#1fa3ec"></circle></svg></div>
+                    <footer><p><a href="#top">[Top]</a></p></footer>
+                </article>
+
+                <article id="embedded__iframes">
+                    <header><h2>IFrames</h2></header>
+                    <div><iframe src="http://www.google.com" height="300"></iframe></div>
+                    <footer><p><a href="#top">[Top]</a></p></footer>
+                </article>
+            </section>
+
+            <section id="forms">
+                <header><h1>Form elements</h1></header>
+
+                <form>
+                    <fieldset id="forms__text">
+                        <legend>Text fields</legend>
+
+                        <p>
+                            <label for="input__text">Text Input <abbr title="Required">*</abbr></label>
+                            <input id="input__text" type="text" placeholder="Text Input">
+                        </p>
+                        <p>
+                            <label for="input__password">Password</label>
+                            <input id="input__password" type="password" placeholder="Type your Password">
+                        </p>
+                        <p>
+                            <label for="input__webaddress">Web Address</label>
+                            <input id="input__webaddress" type="url" placeholder="http://yoursite.com">
+                        </p>
+                        <p>
+                            <label for="input__emailaddress">Email Address</label>
+                            <input id="input__emailaddress" type="email" placeholder="name@email.com">
+                        </p>
+                        <p>
+                            <label for="input__search">Search</label>
+                            <input id="input__search" type="search" placeholder="Enter Search Term">
+                        </p>
+                        <p>
+                            <label for="input__text2">Number Input <abbr title="Required">*</abbr></label>
+                            <input id="input__text2" type="number" placeholder="Enter a Number">
+                        </p>
+                        <p>
+                            <label for="input__textarea">Textarea</label>
+                            <textarea id="input__textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
+                        </p>
+                        <p>
+                            <label for="input__text3" class="error">Error</label>
+                            <input id="input__text3" class="is-error" type="text" placeholder="Text Input">
+                        </p>
+                        <p>
+                            <label for="input__text4" class="valid">Valid</label>
+                            <input id="input__text4" class="is-valid" type="text" placeholder="Text Input">
+                        </p>
+                    </fieldset>
+
+                    <p><a href="#top">[Top]</a></p>
+
+                    <fieldset id="forms__select">
+                        <legend>Select menus</legend>
+
+                        <p>
+                            <label for="select">Select</label>
+                            <select id="select">
+                                <optgroup label="Option Group">
+                                    <option>Option One</option>
+                                    <option>Option Two</option>
+                                    <option>Option Three</option>
+                                </optgroup>
+                            </select>
+                        </p>
+                    </fieldset>
+
+                    <p><a href="#top">[Top]</a></p>
+
+                    <fieldset id="forms__checkbox">
+                        <legend>Checkboxes</legend>
+
+                        <ul class="list list--bare">
+                            <li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
+                            <li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
+                            <li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
+                        </ul>
+                    </fieldset>
+
+                    <p><a href="#top">[Top]</a></p>
+
+                    <fieldset id="forms__radio">
+                        <legend>Radio buttons</legend>
+
+                        <ul class="list list--bare">
+                            <li><label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label></li>
+                            <li><label for="radio2"><input id="radio2" name="radio" type="radio" class="radio"> Option 2</label></li>
+                            <li><label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label></li>
+                        </ul>
+                    </fieldset>
+
+                    <p><a href="#top">[Top]</a></p>
+
+                    <fieldset id="forms__html5">
+                        <legend>HTML5 inputs</legend>
+
+                        <p>
+                            <label for="ic">Color input</label>
+                            <input type="color" id="ic" value="#000000">
+                        </p>
+                        <p>
+                            <label for="in">Number input</label>
+                            <input type="number" id="in" min="0" max="10" value="5">
+                        </p>
+                        <p>
+                            <label for="ir">Range input</label>
+                            <input type="range" id="ir" value="10">
+                        </p>
+                        <p>
+                            <label for="idd">Date input</label>
+                            <input type="date" id="idd" value="1970-01-01">
+                        </p>
+                        <p>
+                            <label for="idm">Month input</label>
+                            <input type="month" id="idm" value="1970-01">
+                        </p>
+                        <p>
+                            <label for="idw">Week input</label>
+                            <input type="week" id="idw" value="1970-W01">
+                        </p>
+                        <p>
+                            <label for="idt">Datetime input</label>
+                            <input type="datetime" id="idt" value="1970-01-01T00:00:00Z">
+                        </p>
+                        <p>
+                            <label for="idtl">Datetime-local input</label>
+                            <input type="datetime-local" id="idtl" value="1970-01-01T00:00">
+                        </p>
+                    </fieldset>
+
+                    <p><a href="#top">[Top]</a></p>
+
+                    <fieldset id="forms__action">
+                        <legend>Action buttons</legend>
+
+                        <p>
+                            <input type="submit" value="Input">
+                            <button type="submit">Button</button>
+                            <input type="reset" value="Reset">
+                            <input type="submit" value="Disabled" disabled>
+                        </p>
+                    </fieldset>
+
+                    <p><a href="#top">[Top]</a></p>
+                </form>
+            </section>
+        </main>
+
+        <footer role="contentinfo">
+            <p>Made by <a href="http://twitter.com/cbracco">@cbracco</a>. Code on <a href="http://github.com/cbracco/html5-test-page">GitHub</a>.</p>
+        </footer>
+    </div>
+</body>
+</html>