Browse files

Edit demo file; addition of <form> elements, <mark>, <blockquote>, an…

…d clearer inline element tests.
  • Loading branch information...
1 parent 4fdeb70 commit 25d2e3e421f013ddca0f1a2002c2cd4c8a05df79 @necolas necolas committed May 17, 2011
Showing with 176 additions and 223 deletions.
  1. +176 −223 demo.html
View
399 demo.html
@@ -1,225 +1,178 @@
-<!doctype html>
+<!DOCTYPE html>
<html>
- <head>
- <meta charset="utf-8" />
- <meta name="viewport" content="target-densitydpi=160dpi, width=device-width, minimum-scale=1.0, maximum-scale=1.0">
- <title>Normalize CSS</title>
- <link rel="stylesheet" href="normalize.css" />
- <link rel="stylesheet" href="normalize.metrics.css" />
- <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
- </head>
- <body>
- <header>
- <hgroup>
- <h1>
- Header Group Heading 1
- </h1>
- <h2>
- Header Group Heading 2
- </h2>
- </hgroup>
- <nav>
- <ul>
- <li>
- First Page
- </li>
- <li>
- Second Page
- </li>
- <li>
- Third Page
- </li>
- <li>
- Last Page
- </li>
- </ul>
- </nav>
- </header>
-
- <section>
- <h1>
- Section Heading 1
- </h1>
- <p>
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.
- </p>
- <p>
- Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.
- </p>
- <h2>
- Section Heading 2
- </h2>
- <p>
- Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.
- </p>
- <h3>
- Section Heading 3
- </h3>
- <p>
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.
- </p>
- </section>
-
- <article>
- <h4>
- Article Heading 4
- </h4>
- <p>
- Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.
- </p>
- <h5>
- Article Heading 5
- </h5>
- <p>
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.
- </p>
- <h6>
- Article Heading 6
- </h6>
- <p>
- Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.
- </p>
- </article>
-
- <ol>
- <li>
- Sed ut perspiciatis unde
- </li>
- <li>
- omnis iste natus error
- </li>
- <li>
- sit voluptatem accusantium
- </li>
- </ol>
-
- <ul>
- <li>
- doloremque laudantium
- </li>
- <li>
- totam rem aperiam eaque
- </li>
- <li>
- ipsa quae ab illo
- </li>
- </ul>
-
- <dl>
- <dt>
- Definition list term #1
- </dt>
- <dd>
- Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- </dd>
- <dt>
- Definition list term #2
- </dt>
- <dd>
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- </dd>
- </dl>
-
- <nav>
- <ul>
- <li>
- <a href="#">navigation item #1</a>
- </li>
- <li>
- <a href="#">navigation item #2</a>
- </li>
- <li>
- <a href="#">navigation item #3</a>
- </li>
- </ul>
- </nav>
-
- <pre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</pre>
-
- <div class="spacer"></div>
-
- <p>
- <cite>Confucius, The Confucian Cite</cite>, (551 BC - 479 BC)
- </p>
-
- <table summary="Jimi Hendrix albums">
- <caption>
- Jimi Hendrix - albums
- </caption>
- <thead>
- <tr>
- <th>Album</th>
- <th>Year</th>
- <th>Price</th>
- </tr>
- </thead>
- <tfoot>
- <tr>
- <th>Album</th>
- <th>Year</th>
- <th>Price</th>
- </tr>
- </tfoot>
- <tbody>
- <tr>
- <td>Are You Experienced</td>
- <td>1967</td>
- <td>$10.00</td>
- </tr>
- <tr>
- <td>Axis: Bold as Love</td>
- <td>1967</td>
- <td>$12.00</td>
- </tr>
- <tr>
- <td>Electric Ladyland</td>
- <td>1968</td>
- <td>$10.00</td>
- </tr>
- <tr>
- <td>Band of Gypsys</td>
- <td>1970</td>
- <td>$12.00</td>
- </tr>
- </tbody>
- </table>
-
- <p>
- Lorem ipsum dolor <a href="#">a element</a> sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- </p>
- <p>
- Lorem ipsum dolor sit amet, consectetur <abbr title="Title text">abbr element</abbr> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- </p>
-
- <p>
- Lorem ipsum dolor <b>b element</b> sit amet, consectetur <i>i element</i> adipisicing elit, sed <s>s element</s> do eiusmod tempor <u>u element</u> incididunt ut labore et dolore magna aliqua.
- </p>
-
- <p>
- Lorem ipsum dolor <code>code element</code> sit amet, consectetur <kbd>kbd element</kbd> adipisicing elit, sed <samp>samp element</samp> do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- </p>
-
- <p>
- Lorem ipsum dolor sit amet, consectetur <strong>strong element</strong> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- </p>
-
- <p>
- Lorem ipsum dolor <cite>cite element</cite> sit amet, consectetur <dfn>dfn element</dfn> adipisicing elit, sed <em>em element</em> do eiusmod tempor <q>q element</q> incididunt ut labore <var>var element</var> et dolore magna aliqua.
- </p>
-
- <p>
- Lorem ipsum dolor sit amet, consectetur <del>del element</del> adipisicing elit, sed <strike>strike element</strike> do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- </p>
-
- <p>
- Lorem ipsum dolor sit amet, consectetur <ins>ins element</ins> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- </p>
-
- <p>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed <sub>sub element</sub> do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- </p>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore <sup>sup element</sup> et dolore magna aliqua.
- </p>
- </body>
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, minimum-scale=1.0">
+ <title>Normalize CSS</title>
+ <link rel="stylesheet" href="normalize.css">
+ <link rel="stylesheet" href="normalize.metrics.css">
+ <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
+ </head>
+ <body>
+ <header>
+ <hgroup>
+ <h1>Grouped Heading 1</h1>
+ <h2>Grouped Heading 2</h2>
+ </hgroup>
+ <nav>
+ <ul>
+ <li><a href="#">navigation item #1</a></li>
+ <li><a href="#">navigation item #2</a></li>
+ <li><a href="#">navigation item #3</a></li>
+ </ul>
+ </nav>
+ </header>
+
+ <section>
+ <h1>Section Heading 1</h1>
+ <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>
+ <p>Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.</p>
+ <h2>Section Heading 2</h2>
+ <p>Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.</p>
+ <h3>Section Heading 3</h3>
+ <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>
+ </section>
+
+ <article>
+ <h4>Article Heading 4</h4>
+ <p>Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.</p>
+ <h5>Article Heading 5</h5>
+ <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.</p>
+ <h6>Article Heading 6</h6>
+ <p>Agnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat ma.</p>
+ </article>
+
+ <p>
+ The <a href="#">a element</a> example<br>
+ The <abbr title="Title text">abbr element</abbr> example<br>
+ The <b>b element</b> example<br>
+ The <cite>cite element</cite> example<br>
+ The <code>code element</code> example<br>
+ The <del>del element</del> example<br>
+ The <dfn>dfn element</dfn> example<br>
+ The <em>em element</em> example<br>
+ The <i>i element</i> example<br>
+ The img element <img src="http://placehold.it/16x16" alt=""> example<br>
+ The <ins>ins element</ins> example<br>
+ The <kbd>kbd element</kbd> example<br>
+ The <mark>mark element</mark> example<br>
+ The <q>q element <q>inside</q> a q element</q> example<br>
+ The <s>s element</s> example<br>
+ The <samp>samp element</samp> example<br>
+ The <small>small element</small> example<br>
+ The <span>span element</span> example<br>
+ The <strike>strike element</strike> example<br>
+ The <strong>strong element</strong> example<br>
+ The <sub>sub element</sub> example<br>
+ The <sup>sup element</sup> example<br>
+ The <var>var element</var> example<br>
+ The <u>u element</u> example
+ </p>
+
+ <address>Address: somewhere, World</address>
+
+ <blockquote>
+ <p>Some sort of famous witty quote marked up with a &lt;blockquote> and a child &lt;p> element.</p>
+ </blockquote>
+
+ <blockquote>Even better philosophical quote marked up with just a &lt;blockquote> element.</blockquote>
+
+ <ol>
+ <li>Sed ut perspiciatis unde</li>
+ <li>omnis iste natus error</li>
+ <li>sit voluptatem accusantium</li>
+ </ol>
+
+ <ul>
+ <li>doloremque laudantium</li>
+ <li>totam rem aperiam eaque</li>
+ <li>ipsa quae ab illo</li>
+ </ul>
+
+ <dl>
+ <dt>Definition list term #1</dt>
+ <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
+ <dt>Definition list term #2</dt>
+ <dd>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
+ </dl>
+
+ <pre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.</pre>
+ <pre><code>&lt;html></code>
+ <code>&lt;head></code>
+ <code>&lt;/head></code>
+ <code>&lt;body></code>
+ <code>&lt;div class="main"> &lt;div></code>
+ <code>&lt;/body></code>
+<code>&lt;/html></code></pre>
+
+ <table summary="Jimi Hendrix albums">
+ <caption>Jimi Hendrix - albums</caption>
+ <thead>
+ <tr>
+ <th>Album</th>
+ <th>Year</th>
+ <th>Price</th>
+ </tr>
+ </thead>
+ <tfoot>
+ <tr>
+ <th>Album</th>
+ <th>Year</th>
+ <th>Price</th>
+ </tr>
+ </tfoot>
+ <tbody>
+ <tr>
+ <td>Are You Experienced</td>
+ <td>1967</td>
+ <td>$10.00</td>
+ </tr>
+ <tr>
+ <td>Axis: Bold as Love</td>
+ <td>1967</td>
+ <td>$12.00</td>
+ </tr>
+ <tr>
+ <td>Electric Ladyland</td>
+ <td>1968</td>
+ <td>$10.00</td>
+ </tr>
+ <tr>
+ <td>Band of Gypsys</td>
+ <td>1970</td>
+ <td>$12.00</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <form action="#">
+ <fieldset>
+ <legend>Form legend</legend>
+ <div><label for="i1">Optional Text input:</label><input type="text" id="i1" value="input text"></div>
+ <div><label for="i2">Required Text input:</label><input type="text" id="i2" required></div>
+ <div><label for="i3">Text input with pattern requirement and placeholder:</label><input type="text" id="i3" pattern="\d{5}(-\d{4})?" title="a US Zip code, with or without the +4 exension" placeholder="12345-6789"></div>
+ <div><label for="i4">Search input:</label><input type="search" id="i4"></div>
+ <div><label for="i5">Email input:</label><input type="email" id="i5"></div>
+ <div><label for="i6">URL input:</label><input type="url" id="i6"></div>
+ <div><label for="i7">Password input:</label><input type="password" id="i7" value="password"></div>
+ <div><label for="i8">Radio input:</label><input type="radio" id="i8"></div>
+ <div><label for="i9">Checkbox input:</label><input type="checkbox" id="i9"></div>
+ <div><input type="radio" id="i10"><label for="i10">Radio input</label></div>
+ <div><input type="checkbox" id="i11"><label for="i11">Checkbox input</label></div>
+
+ <div><label for="i12">Select field:</label><select id="i12"><option>Option 01</option><option>Option 02</option></select></div>
+ <div><label for="i13">Textarea:</label><textarea id="i13" cols="30" rows="5" >Textarea text</textarea></div>
+
+ <div><input type="image" src="http://placehold.it/90x24" alt="Image (input)"></div>
+ <div><input type="reset" value="Reset (input)"></div>
+ <div><input type="button" value="Button (input)"></div>
+ <div><input type="submit" value="Submit (input)"></div>
+
+ <div><button type="reset">Reset (button)</button></div>
+ <div><button type="button">Button (button)</button></div>
+ <div><button type="submit">Submit (button)</button></div>
+ </fieldset>
+ </form>
+
+ </body>
</html>

0 comments on commit 25d2e3e

Please sign in to comment.