HTML Test Markup

html-test-markup.html

<div id="top" class="page" role="document">
<header role="banner">
<h1>HTML5 Test Page</h1>
This is a test page filled with common HTML elements to be used to provide visual feedback whilst building CSS systems and frameworks.

</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__code">Code</a></li>
 	<li><a href="#text__inline">Inline elements</a></li>
 	<li><a href="#text__comments">HTML Comments</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__meter">Meter</a></li>
 	<li><a href="#embedded__progress">Progress</a></li>
 	<li><a href="#embedded__svg">Inline SVG</a></li>
 	<li><a href="#embedded__iframe">IFrames</a></li>
</ul>
</li>
 	<li><a href="#forms">Form elements</a>
<ul>
 	<li><a href="#forms__input">Input 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__textareas">Textareas</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><a href="#top">[Top]</a>

</footer>
</article>
<article id="text__paragraphs">
<header>
<h1>Paragraphs</h1>
</header>
<div>

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.

</div>
<footer><a href="#top">[Top]</a>

</footer>
</article>
<article id="text__blockquotes">
<header>
<h1>Blockquotes</h1>
</header>
<div>
<blockquote>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.

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.

<cite><a href="#!">Said no one, ever.</a></cite></blockquote>
</div>
<footer><a href="#top">[Top]</a>

</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><a href="#top">[Top]</a>

</footer>
</article>
<article id="text__hr">
<header>
<h1>Horizontal rules</h1>
</header>
<div>

<hr>

</div>
<footer><a href="#top">[Top]</a>

</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><a href="#top">[Top]</a>

</footer>
</article>
<article id="text__code">
<header>
<h1>Code</h1>
</header>
<div>

<strong>Keyboard input:</strong> <kbd>Cmd</kbd>

<strong>Inline code:</strong> <code>&lt;div&gt;code&lt;/div&gt;</code>

<strong>Sample output:</strong> <samp>This is sample output from a computer program.</samp>
<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><a href="#top">[Top]</a>

</footer>
</article>
<article id="text__inline">
<header>
<h1>Inline elements</h1>
</header>
<div>

<a href="#!">This is a text link</a>.

<strong>Strong is used to indicate strong importance.</strong>

<em>This text has added emphasis.</em>

The <b>b element</b> is stylistically different text from normal text, without any special importance.

The <i>i element</i> is text that is offset from the normal text.

The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation.

<del>This text is deleted</del> and <ins>This text is inserted</ins>.

<s>This text has a strikethrough</s>.

Superscript<sup>®</sup>.

Subscript for things like H<sub>2</sub>O.

<small>This small text is small for for fine print, etc.</small>

Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr>

<q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q>

<cite>This is a citation.</cite>

The <dfn>dfn element</dfn> indicates a definition.

The <mark>mark element</mark> indicates a highlight.

The <var>variable element</var>, such as <var>x</var> = <var>y</var>.

The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time>

</div>
<footer><a href="#top">[Top]</a>

</footer>
</article>
<article id="text__comments">
<header>
<h1>HTML Comments</h1>
</header>
<div>

There is comment here: <!--This comment should not be displayed-->

There is a comment spanning multiple tags and lines below here.

<!--<a href="#!">This is a text link. But it should not be displayed in a comment</a>.

<strong>Strong is used to indicate strong importance. But, it should not be displayed in a comment</strong>

<em>This text has added emphasis. But, it should not be displayed in a comment</em>

-->

</div>
<footer><a href="#top">[Top]</a>

</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>
<img src="http://placekitten.com/480/480" alt="Image alt text">
<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/420/420" alt="Image alt text"><figcaption>Here is a caption for this image.</figcaption></figure>
</div>
<footer><a href="#top">[Top]</a>

</footer>
</article>
<article id="embedded__audio">
<header>
<h2>Audio</h2>
</header>
<div><audio controls="controls">audio</audio></div>
<footer><a href="#top">[Top]</a>

</footer>
</article>
<article id="embedded__video">
<header>
<h2>Video</h2>
</header>
<div><video controls="controls" width="300" height="150">video</video></div>
<footer><a href="#top">[Top]</a>

</footer>
</article>
<article id="embedded__canvas">
<header>
<h2>Canvas</h2>
</header>
<div><canvas>canvas</canvas></div>
<footer><a href="#top">[Top]</a>

</footer>
</article>
<article id="embedded__meter">
<header>
<h2>Meter</h2>
</header>
<div><meter value="2" min="0" max="10">2 out of 10</meter></div>
<footer><a href="#top">[Top]</a>

</footer>
</article>
<article id="embedded__progress">
<header>
<h2>Progress</h2>
</header>
<div><progress>progress</progress></div>
<footer><a href="#top">[Top]</a>

</footer>
</article>
<article id="embedded__svg">
<header>
<h2>Inline SVG</h2>
</header>
<div></div>
<footer><a href="#top">[Top]</a>

</footer>
</article>
<article id="embedded__iframe">
<header>
<h2>IFrame</h2>
</header>
<div><iframe src="index.html" height="300"></iframe></div>
<footer><a href="#top">[Top]</a>

</footer>
</article>
</section>
<section id="forms">
<header>
<h1>Form elements</h1>
</header>
<form class="form">
<fieldset id="forms__input">
<legend>Input fields</legend><label for="input__text">Text Input</label>
<input id="input__text" style="background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAfBJREFUWAntVk1OwkAUZkoDKza4Utm61iP0AqyIDXahN2BjwiHYGU+gizap4QDuegWN7lyCbMSlCQjU7yO0TOlAi6GwgJc0fT/fzPfmzet0crmD7HsFBAvQbrcrw+Gw5fu+AfOYvgylJ4TwCoVCs1ardYTruqfj8fgV5OUMSVVT93VdP9dAzpVvm5wJHZFbg2LQ2pEYOlZ/oiDvwNcsFoseY4PBwMCrhaeCJyKWZU37KOJcYdi27QdhcuuBIb073BvTNL8ln4NeeR6NRi/wxZKQcGurQs5oNhqLshzVTMBewW/LMU3TTNlO0ieTiStjYhUIyi6DAp0xbEdgTt+LE0aCKQw24U4llsCs4ZRJrYopB6RwqnpA1YQ5NGFZ1YQ41Z5S8IQQdP5laEBRJcD4Vj5DEsW2gE6s6g3d/YP/g+BDnT7GNi2qCjTwGd6riBzHaaCEd3Js01vwCPIbmWBRx1nwAN/1ov+/drgFWIlfKpVukyYihtgkXNp4mABK+1GtVr+SBhJDbBIubVw+Cd/TDgKO2DPiN3YUo6y/nDCNEIsqTKH1en2tcwA9FKEItyDi3aIh8Gl1sRrVnSDzNFDJT1bAy5xpOYGn5fP5JuL95ZjMIn1ya7j5dPGfv0A5eAnpZUY3n5jXcoec5J67D9q+VuAPM47D3XaSeL4AAAAASUVORK5CYII='); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;" type="text" placeholder="Text Input">

<label for="input__password">Password</label>
<input id="input__password" style="background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABKRJREFUWAnNl0tsVGUUxzvTTlslZUaCloZHY6BRFkp9sDBuqgINpaBp02dIDImwKDG6ICQ8jBYlhg0rxUBYEALTpulMgBlqOqHRDSikJkZdGG0CRqAGUuwDovQ1/s7NPTffnTu3zMxGvuT2vP7n8Z3vu+dOi4r+5xUoJH8sFquamZmpTqfTVeIfCARGQ6HQH83NzaP5xsu5gL6+vuVzc3NdJN1Kkhd8Ev1MMYni4uJjra2tt3wwLvUjCxgYGFg8Pj7+MV5dPOUub3/hX0zHIpFId0NDw6Q/jO4tZOzv76+Znp6+AOb5TBw7/YduWC2Hr4J/IhOD/GswGHy7vb39tyw2S+VbAC1/ZXZ29hKoiOE8RrIvaPE5WvyjoS8CX8sRvYPufYpZYtjGS0pKNoD/wdA5bNYCCLaMYMMEWq5IEn8ZDof3P6ql9pF9jp8cma6bFLGeIv5ShdISZUzKzqPIVnISp3l20caTJsaPtwvc3dPTIx06ziZkkyvY0FnoW5l+ng7guAWnpAI5w4MkP6yy0GQy+dTU1JToGm19sqKi4kBjY+PftmwRYn1ErEOq4+i2tLW1DagsNGgKNv+p6tj595nJxUbyOIF38AwipoSfnJyMqZ9SfD8jxlWV5+fnu5VX6iqgt7d3NcFeUiN0n8FbLEOoGkwdgY90dnbu7OjoeE94jG9wd1aZePRp5AOqw+9VMM+qLNRVABXKkLEWzn8S/FtbdAhnuVQE7LdVafBPq04pMYawO0OJ+6XHZkFcBQA0J1xKgyhlB0EChEWGX8RulsgjvOjEBu+5V+icWOSoFawuVwEordluG28oSCmXSs55SGSCHiXhmDzC25ghMHGbdwhJr6sAdpnyQl0FYIyoEX5CeYOuNHg/NhvGiUUxVgfV2VUAxjtqgPecp9oKoE4sNnbX9HcVgMH8nD5nAoWnKM/5ZmKyySRdq3pCmDncR4DxOwVC64eHh0OGLOcur1Vey46xUZ3IcVl5oa4OlJaWXgQwJwZyhUdGRjqE14VtSnk/mokhxnawiwUvsZmsX5u+rgKamprGMDoA5sKhRCLxpDowSpsJ8vpCj2AUPzg4uIiNfKIyNMkH6Z4hF3k+RgTYz6vVAEiKq2bsniZIC0nTtvMVMwBzoBT9tKkTHp8Ak1V8dTrOE+NgJs7VATESTH5WnVAgfHUqlXK6oHpJEI1G9zEZH/Du16leqHyS0UXBNKmeOMf5NvyislJPB8RAFz4g8IuwofLy8k319fUP1EEouw7L7mC3kUTO1nn3sb02MTFxFpsz87FfJuaH4pu5fF+reDz+DEfxkI44Q0ScSbyOpDGe1RqMBN08o+ha0L0JdeKi/6msrGwj98uZMeon1AGaSj+elr9LwK9IkO33n8cN7Hl2vp1N3PcYbUXOBbDz9bwV1/wCmXoS3+B128OPD/l2LLg8l9APXVlZKZfzfDY7ehlQv0PPQDez6zW5JJdYOXdAwHK2dGIv7GH4YtHJIvEOvvunLCHPPzl3QOLKTkl0hPbKaDUvlTU988xtwfMqQBPQ3m/4mf0yBVlDCSr/CRW0CipAMnGzb9XU1NSRvIX7kSgo++Pg9B8wltxxbHKPZgAAAABJRU5ErkJggg=='); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;" type="password" placeholder="Type your Password">

<label for="input__webaddress">Web Address</label>
<input id="input__webaddress" type="url" placeholder="http://yoursite.com">

<label for="input__emailaddress">Email Address</label>
<input id="input__emailaddress" type="email" placeholder="name@email.com">

<label for="input__phone">Phone Number</label>
<input id="input__phone" type="tel" placeholder="(999) 999-9999">

<label for="input__search">Search</label>
<input id="input__search" type="search" placeholder="Enter Search Term">

<label for="input__text2">Number Input</label>
<input id="input__text2" type="number" placeholder="Enter a Number">

<label class="error" for="input__text3">Error</label>
<input id="input__text3" class="is-error" type="text" placeholder="Text Input">

<label class="valid" for="input__text4">Valid</label>
<input id="input__text4" class="is-valid" type="text" placeholder="Text Input"></fieldset>
<a href="#top">[Top]</a>
<fieldset id="forms__select">
<legend>Select menus</legend><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></fieldset>
<a href="#top">[Top]</a>
<fieldset id="forms__checkbox">
<legend>Checkboxes</legend>
<ul class="list list--bare">
 	<li><input id="checkbox1" checked="checked" name="checkbox" type="checkbox"><label for="checkbox1">Choice A</label></li>
 	<li><input id="checkbox2" name="checkbox" type="checkbox"><label for="checkbox2">Choice B</label></li>
 	<li><input id="checkbox3" name="checkbox" type="checkbox"><label for="checkbox3">Choice C</label></li>
</ul>
</fieldset>
<a href="#top">[Top]</a>
<fieldset id="forms__radio">
<legend>Radio buttons</legend>
<ul class="list list--bare">
 	<li><input id="radio1" class="radio" checked="checked" name="radio" type="radio"><label for="radio1">Option 1</label></li>
 	<li><input id="radio2" class="radio" name="radio" type="radio"><label for="radio2">Option 2</label></li>
 	<li><input id="radio3" class="radio" name="radio" type="radio"><label for="radio3">Option 3</label></li>
</ul>
</fieldset>
<a href="#top">[Top]</a>
<fieldset id="forms__textareas">
<legend>Textareas</legend><label for="textarea">Textarea</label>
<textarea id="textarea" cols="48" rows="8" placeholder="Enter your message here"></textarea></fieldset>
<a href="#top">[Top]</a>
<fieldset id="forms__html5">
<legend>HTML5 inputs</legend><label for="ic">Color input</label>
<input id="ic" type="color" value="#000000">

<label for="in">Number input</label>
<input id="in" max="10" min="0" type="number" value="5">

<label for="ir">Range input</label>
<input id="ir" type="range" value="10">

<label for="idd">Date input</label>
<input id="idd" type="date" value="1970-01-01">

<label for="idm">Month input</label>
<input id="idm" type="month" value="1970-01">

<label for="idw">Week input</label>
<input id="idw" type="week" value="1970-W01">

<label for="idt">Datetime input</label>
<input id="idt" type="datetime" value="1970-01-01T00:00:00Z">

<label for="idtl">Datetime-local input</label>
<input id="idtl" type="datetime-local" value="1970-01-01T00:00"></fieldset>
<a href="#top">[Top]</a>
<fieldset id="forms__action">
<legend>Action buttons</legend><input type="submit" value="button">
<input type="button" value="button">
<input type="reset" value="button">
<input disabled="disabled" type="submit" value="button">

<button type="submit">&lt;button type=submit&gt;</button>
<button type="button">&lt;button type=button&gt;</button>
<button type="reset">&lt;button type=reset&gt;</button>
<button disabled="disabled" type="button">&lt;button disabled&gt;</button></fieldset>
<a href="#top">[Top]</a>

</form>
</section>

</main>

<footer role="contentinfo">Made by <a href="http://twitter.com/cbracco">@cbracco</a>. Code on <a href="http://github.com/cbracco/html5-test-page">GitHub</a>.

</footer></div>