mirror_html/html5-test-page
1
0
Fork 0
mirror of https://github.com/cbracco/html5-test-page.git synced 2025-08-04 21:27:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Remove whitespace and fix indentation

Browse Source 
This is really just updating the file to match my current personal
preferences for formatting HTML files. No functionality is changing
here.
This commit is contained in:
Chris Bracco
2016-02-01 09:33:07 -05:00
parent c3cae26738
commit d9bb5636a4
1 changed files with 401 additions and 481 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
index.html
View File

@@ -11,7 +11,6 @@
<h1>HTML5 Test Page</h1> <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> <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> </header>
<nav role="navigation"> <nav role="navigation">
<ul> <ul>
<li> <li>
@@ -54,16 +53,13 @@
</li> </li>
</ul> </ul>
</nav> </nav>
<main role="main"> <main role="main">
<section id="text"> <section id="text">
<header><h1>Text</h1></header> <header><h1>Text</h1></header>
<article id="text__headings"> <article id="text__headings">
<header> <header>
<h1>Headings</h1> <h1>Headings</h1>
</header> </header>
<div> <div>
<h1>Heading 1</h1> <h1>Heading 1</h1>
<h2>Heading 2</h2> <h2>Heading 2</h2>
@@ -72,23 +68,17 @@
<h5>Heading 5</h5> <h5>Heading 5</h5>
<h6>Heading 6</h6> <h6>Heading 6</h6>
</div> </div>
<footer><p><a href="#top">[Top]</a></p></footer> <footer><p><a href="#top">[Top]</a></p></footer>
</article> </article>
<article id="text__paragraphs"> <article id="text__paragraphs">
<header><h1>Paragraphs</h1></header> <header><h1>Paragraphs</h1></header>
<div> <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> <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> </div>
<footer><p><a href="#top">[Top]</a></p></footer> <footer><p><a href="#top">[Top]</a></p></footer>
</article> </article>
<article id="text__blockquotes"> <article id="text__blockquotes">
<header><h1>Blockquotes</h1></header> <header><h1>Blockquotes</h1></header>
<div> <div>
<blockquote> <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>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>
@@ -96,27 +86,22 @@
<cite><a href="#!">Said no one, ever.</a></cite> <cite><a href="#!">Said no one, ever.</a></cite>
</blockquote> </blockquote>
</div> </div>
<footer><p><a href="#top">[Top]</a></p></footer> <footer><p><a href="#top">[Top]</a></p></footer>
</article> </article>
<article id="text__lists"> <article id="text__lists">
<header><h1>Lists</h1></header> <header><h1>Lists</h1></header>
<div> <div>
<h3>Definition list</h3> <h3>Definition list</h3>
<dl> <dl>
<dt>Definition List Title</dt> <dt>Definition List Title</dt>
<dd>This is a definition list division.</dd> <dd>This is a definition list division.</dd>
</dl> </dl>
<h3>Ordered List</h3> <h3>Ordered List</h3>
<ol> <ol>
<li>List Item 1</li> <li>List Item 1</li>
<li>List Item 2</li> <li>List Item 2</li>
<li>List Item 3</li> <li>List Item 3</li>
</ol> </ol>
<h3>Unordered List</h3> <h3>Unordered List</h3>
<ul> <ul>
<li>List Item 1</li> <li>List Item 1</li>
@@ -124,23 +109,17 @@
<li>List Item 3</li> <li>List Item 3</li>
</ul> </ul>
</div> </div>
<footer><p><a href="#top">[Top]</a></p></footer> <footer><p><a href="#top">[Top]</a></p></footer>
</article> </article>
<article id="text__hr"> <article id="text__hr">
<header><h1>Horizontal rules</h1></header> <header><h1>Horizontal rules</h1></header>
<div> <div>
<hr> <hr>
</div> </div>
<footer><p><a href="#top">[Top]</a></p></footer> <footer><p><a href="#top">[Top]</a></p></footer>
</article> </article>
<article id="text__tables"> <article id="text__tables">
<header><h1>Tabular data</h1></header> <header><h1>Tabular data</h1></header>
<table> <table>
<caption>Table Caption</caption> <caption>Table Caption</caption>
<thead> <thead>
@@ -152,7 +131,6 @@
<th>Table Heading 5</th> <th>Table Heading 5</th>
</tr> </tr>
</thead> </thead>
<tfoot> <tfoot>
<tr> <tr>
<th>Table Footer 1</th> <th>Table Footer 1</th>
@@ -162,7 +140,6 @@
<th>Table Footer 5</th> <th>Table Footer 5</th>
</tr> </tr>
</tfoot> </tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Table Cell 1</td> <td>Table Cell 1</td>
@@ -194,20 +171,15 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<footer><p><a href="#top">[Top]</a></p></footer> <footer><p><a href="#top">[Top]</a></p></footer>
</article> </article>
<article id="text__code"> <article id="text__code">
<header><h1>Code</h1></header> <header><h1>Code</h1></header>
<div> <div>
<p><strong>Keyboard input:</strong> <kbd>Cmd</kbd></p> <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>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> <p><strong>Sample output:</strong> <samp>This is sample output from a computer program.</samp></p>
<h2>Pre-formatted text</h2> <h2>Pre-formatted text</h2>
<pre>P R E F O R M A T T E D T E X T <pre>P R E F O R M A T T E D T E X T
! " # $ % &amp; ' ( ) * + , - . / ! " # $ % &amp; ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ? 0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
@@ -216,58 +188,36 @@ 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 ` 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> p q r s t u v w x y z { | } ~ </pre>
</div> </div>
<footer><p><a href="#top">[Top]</a></p></footer> <footer><p><a href="#top">[Top]</a></p></footer>
</article> </article>
<article id="text__inline"> <article id="text__inline">
<header><h1>Inline elements</h1></header> <header><h1>Inline elements</h1></header>
<div> <div>
<p><a href="#!">This is a text link</a>.</p> <p><a href="#!">This is a text link</a>.</p>
<p><strong>Strong is used to indicate strong importance.</strong></p> <p><strong>Strong is used to indicate strong importance.</strong></p>
<p><em>This text has added emphasis.</em></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 <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 <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>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><del>This text is deleted</del> and <ins>This text is inserted</ins>.</p>
<p><s>This text has a strikethrough</s>.</p> <p><s>This text has a strikethrough</s>.</p>
<p>Superscript<sup>®</sup>.</p> <p>Superscript<sup>®</sup>.</p>
<p>Subscript for things like H<sub>2</sub>O.</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><small>This small text is small for for fine print, etc.</small></p>
<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></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><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><cite>This is a citation.</cite>
</p><p>The <dfn>dfn element</dfn> indicates a definition.</p> </p><p>The <dfn>dfn element</dfn> indicates a definition.</p>
<p>The <mark>mark element</mark> indicates a highlight.</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 <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> <p>The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time></p>
</div> </div>
<footer><p><a href="#top">[Top]</a></p></footer> <footer><p><a href="#top">[Top]</a></p></footer>
</article> </article>
</section> </section>
<section id="embedded"> <section id="embedded">
<header><h1>Embedded content</h1></header> <header><h1>Embedded content</h1></header>
<article id="embedded__images"> <article id="embedded__images">
<header><h2>Images</h2></header> <header><h2>Images</h2></header>
<div> <div>
@@ -283,57 +233,47 @@ p q r s t u v w x y z { | } ~ </pre>
</div> </div>
<footer><p><a href="#top">[Top]</a></p></footer> <footer><p><a href="#top">[Top]</a></p></footer>
</article> </article>
<article id="embedded__audio"> <article id="embedded__audio">
<header><h2>Audio</h2></header> <header><h2>Audio</h2></header>
<div><audio controls="">audio</audio></div> <div><audio controls="">audio</audio></div>
<footer><p><a href="#top">[Top]</a></p></footer> <footer><p><a href="#top">[Top]</a></p></footer>
</article> </article>
<article id="embedded__video"> <article id="embedded__video">
<header><h2>Video</h2></header> <header><h2>Video</h2></header>
<div><video controls="">video</video></div> <div><video controls="">video</video></div>
<footer><p><a href="#top">[Top]</a></p></footer> <footer><p><a href="#top">[Top]</a></p></footer>
</article> </article>
<article id="embedded__canvas"> <article id="embedded__canvas">
<header><h2>Canvas</h2></header> <header><h2>Canvas</h2></header>
<div><canvas>canvas</canvas></div> <div><canvas>canvas</canvas></div>
<footer><p><a href="#top">[Top]</a></p></footer> <footer><p><a href="#top">[Top]</a></p></footer>
</article> </article>
<article id="embedded__meter"> <article id="embedded__meter">
<header><h2>Meter</h2></header> <header><h2>Meter</h2></header>
<div><meter value="2" min="0" max="10">2 out of 10</meter></div> <div><meter value="2" min="0" max="10">2 out of 10</meter></div>
<footer><p><a href="#top">[Top]</a></p></footer> <footer><p><a href="#top">[Top]</a></p></footer>
</article> </article>
<article id="embedded__progress"> <article id="embedded__progress">
<header><h2>Progress</h2></header> <header><h2>Progress</h2></header>
<div><progress>progress</progress></div> <div><progress>progress</progress></div>
<footer><p><a href="#top">[Top]</a></p></footer> <footer><p><a href="#top">[Top]</a></p></footer>
</article> </article>
<article id="embedded__svg"> <article id="embedded__svg">
<header><h2>Inline SVG</h2></header> <header><h2>Inline SVG</h2></header>
<div><svg width="100px" height="100px"><circle cx="100" cy="100" r="100" fill="#1fa3ec"></circle></svg></div> <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> <footer><p><a href="#top">[Top]</a></p></footer>
</article> </article>
<article id="embedded__iframe"> <article id="embedded__iframe">
<header><h2>IFrame</h2></header> <header><h2>IFrame</h2></header>
<div><iframe src="index.html" height="300"></iframe></div> <div><iframe src="index.html" height="300"></iframe></div>
<footer><p><a href="#top">[Top]</a></p></footer> <footer><p><a href="#top">[Top]</a></p></footer>
</article> </article>
</section> </section>
<section id="forms"> <section id="forms">
<header><h1>Form elements</h1></header> <header><h1>Form elements</h1></header>
<form> <form>
<fieldset id="forms__input"> <fieldset id="forms__input">
<legend>Input fields</legend> <legend>Input fields</legend>
<p> <p>
<label for="input__text">Text Input</label> <label for="input__text">Text Input</label>
<input id="input__text" type="text" placeholder="Text Input"> <input id="input__text" type="text" placeholder="Text Input">
@@ -371,12 +311,9 @@ p q r s t u v w x y z { | } ~ </pre>
<input id="input__text4" class="is-valid" type="text" placeholder="Text Input"> <input id="input__text4" class="is-valid" type="text" placeholder="Text Input">
</p> </p>
</fieldset> </fieldset>
<p><a href="#top">[Top]</a></p> <p><a href="#top">[Top]</a></p>
<fieldset id="forms__select"> <fieldset id="forms__select">
<legend>Select menus</legend> <legend>Select menus</legend>
<p> <p>
<label for="select">Select</label> <label for="select">Select</label>
<select id="select"> <select id="select">
@@ -388,47 +325,35 @@ p q r s t u v w x y z { | } ~ </pre>
</select> </select>
</p> </p>
</fieldset> </fieldset>
<p><a href="#top">[Top]</a></p> <p><a href="#top">[Top]</a></p>
<fieldset id="forms__checkbox"> <fieldset id="forms__checkbox">
<legend>Checkboxes</legend> <legend>Checkboxes</legend>
<ul class="list list--bare"> <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="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="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> <li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
</ul> </ul>
</fieldset> </fieldset>
<p><a href="#top">[Top]</a></p> <p><a href="#top">[Top]</a></p>
<fieldset id="forms__radio"> <fieldset id="forms__radio">
<legend>Radio buttons</legend> <legend>Radio buttons</legend>
<ul class="list list--bare"> <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="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="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> <li><label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label></li>
</ul> </ul>
</fieldset> </fieldset>
<p><a href="#top">[Top]</a></p> <p><a href="#top">[Top]</a></p>
<fieldset id="forms__textareas"> <fieldset id="forms__textareas">
<legend>Textareas</legend> <legend>Textareas</legend>
<p> <p>
<label for="textarea">Textarea</label> <label for="textarea">Textarea</label>
<textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea> <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
</p> </p>
</fieldset> </fieldset>
<p><a href="#top">[Top]</a></p> <p><a href="#top">[Top]</a></p>
<fieldset id="forms__html5"> <fieldset id="forms__html5">
<legend>HTML5 inputs</legend> <legend>HTML5 inputs</legend>
<p> <p>
<label for="ic">Color input</label> <label for="ic">Color input</label>
<input type="color" id="ic" value="#000000"> <input type="color" id="ic" value="#000000">
@@ -462,12 +387,9 @@ p q r s t u v w x y z { | } ~ </pre>
<input type="datetime-local" id="idtl" value="1970-01-01T00:00"> <input type="datetime-local" id="idtl" value="1970-01-01T00:00">
</p> </p>
</fieldset> </fieldset>
<p><a href="#top">[Top]</a></p> <p><a href="#top">[Top]</a></p>
<fieldset id="forms__action"> <fieldset id="forms__action">
<legend>Action buttons</legend> <legend>Action buttons</legend>
<p> <p>
<input type="submit" value="Input"> <input type="submit" value="Input">
<button type="submit">Button</button> <button type="submit">Button</button>
@@ -475,12 +397,10 @@ p q r s t u v w x y z { | } ~ </pre>
<input type="submit" value="Disabled" disabled> <input type="submit" value="Disabled" disabled>
</p> </p>
</fieldset> </fieldset>
<p><a href="#top">[Top]</a></p> <p><a href="#top">[Top]</a></p>
</form> </form>
</section> </section>
</main> </main>
<footer role="contentinfo"> <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> <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> </footer>