v0.9.7

Merge pull request #40 from ConnorJamesLow/patch-1
Close option tags in datalist
2025-08-21 13:21:56 +02:00 · 2021-04-19 11:48:23 -04:00 · 2021-04-19 11:46:58 -04:00 · 2021-04-17 21:06:17 -07:00 · 2021-04-03 16:01:35 -04:00 · 2021-04-03 16:00:59 -04:00
5 changed files with 241 additions and 57 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -0,0 +1,3 @@
+[*]
+indent_style = space
+indent_size = 2
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,39 @@
+# 0.9.7 (April 3, 2021)
+
+- Self-close option tags (thanks @ConnorJamesLow!).
+
+# 0.9.6 (April 3, 2021)
+
+- Remove classes and valid/invalid inputs.
+
+# 0.9.5 (April 3, 2021)
+
+- Add <picture> element (thanks @AurelioDeRosa!).
+
+# 0.9.4 (April 3, 2021)
+
+- Remove unnecessary role attributes. Update headings (thanks @gipsi!).
+
+# 0.9.3 (April 3, 2021)
+
+- Add multiple <select> (thanks @racztiborzoltan!).
+
+# 0.9.2 (April 3, 2021)
+
+- Add nested lists (thanks @charul97!).
+
+# 0.9.1 (April 3, 2021)
+
+- Add background images (thanks @97arushisharma!).
+
+# 0.9.0 (April 3, 2021)
+
+- Add <details>, <address>, <object>, <embed>, <datalist> (thanks @jKratzik!).
+
+# 0.8.0 (March 19, 2018)
+
+- Add test for HTML comments (thanks @ep00ch!).
+
 # 0.7.1 (April 5, 2016)

 - Add missing form button types (thanks @gnowland!).
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
@@ -6,30 +6,34 @@
    <title>HTML5 Test Page</title>
  </head>
  <body>
-    <div id="top" class="page" role="document">
-      <header role="banner">
+    <div id="top" role="document">
+      <header>
        <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">
+      <nav>
        <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__blockquotes">Blockquotes</a></li>
+              <li><a href="#text__details">Details / Summary</a></li>
+              <li><a href="#text__address">Address</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__bgimages">Background 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>
@@ -37,6 +41,8 @@
              <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>
+              <li><a href="#embedded__embed">Embed</a></li>
+              <li><a href="#embedded__object">Object</a></li>
            </ul>
          </li>
          <li>
@@ -53,12 +59,12 @@
          </li>
        </ul>
      </nav>
-      <main role="main">
+      <main>
        <section id="text">
          <header><h1>Text</h1></header>
          <article id="text__headings">
            <header>
-              <h1>Headings</h1>
+              <h2>Headings</h2>
            </header>
            <div>
              <h1>Heading 1</h1>
@@ -71,12 +77,102 @@
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="text__paragraphs">
-            <header><h1>Paragraphs</h1></header>
+            <header><h2>Paragraphs</h2></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><h2>Blockquotes</h2></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><h2>Lists</h2></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 type="1">
+                <li>List Item 1</li>
+                <li>
+                  List Item 2
+                  <ol type="A">
+                    <li>List Item 1</li>
+                    <li>
+                      List Item 2
+                      <ol type="a">
+                        <li>List Item 1</li>
+                        <li>
+                          List Item 2
+                          <ol type="I">
+                            <li>List Item 1</li>
+                            <li>
+                              List Item 2
+                              <ol type="i">
+                                <li>List Item 1</li>
+                                <li>List Item 2</li>
+                                <li>List Item 3</li>
+                              </ol>
+                            </li>
+                            <li>List Item 3</li>
+                          </ol>
+                        </li>
+                        <li>List Item 3</li>
+                      </ol>
+                    </li>
+                    <li>List Item 3</li>
+                  </ol>
+                </li>
+                <li>List Item 3</li>
+              </ol>
+              <h3>Unordered List</h3>
+              <ul>
+                <li>List Item 1</li>
+                <li>
+                  List Item 2
+                  <ul>
+                    <li>List Item 1</li>
+                    <li>
+                      List Item 2
+                      <ul>
+                        <li>List Item 1</li>
+                        <li>
+                          List Item 2
+                          <ul>
+                            <li>List Item 1</li>
+                            <li>
+                              List Item 2
+                              <ul>
+                                <li>List Item 1</li>
+                                <li>List Item 2</li>
+                                <li>List Item 3</li>
+                              </ul>
+                            </li>
+                            <li>List Item 3</li>
+                          </ul>
+                        </li>
+                        <li>List Item 3</li>
+                      </ul>
+                    </li>
+                    <li>List Item 3</li>
+                  </ul>
+                </li>
+                <li>List Item 3</li>
+              </ul>
+            </div>
+            <footer><p><a href="#top">[Top]</a></p></footer>
+          </article>
          <article id="text__blockquotes">
            <header><h1>Blockquotes</h1></header>
            <div>
@@ -88,38 +184,34 @@
            </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>
+          <article id="text__details">
+            <header><h1>Details / Summary</h1></header>
+            <details>
+              <summary>Expand for details</summary>
+              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, odio! Odio natus ullam ad quaerat, eaque necessitatibus, aliquid distinctio similique voluptatibus dicta consequuntur animi. Quaerat facilis quidem unde eos! Ipsa.</p>
+            </details>
+            <footer><p><a href="#top">[Top]</a></p></footer>
+          </article>
+          <article id="text__address">
+            <header><h1>Address</h1></header>
+            <address>
+              Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
+              Visit us at:<br>
+              Example.com<br>
+              Box 564, Disneyland<br>
+              USA
+            </address>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="text__hr">
-            <header><h1>Horizontal rules</h1></header>
+            <header><h2>Horizontal rules</h2></header>
            <div>
              <hr>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="text__tables">
-            <header><h1>Tabular data</h1></header>
+            <header><h2>Tabular data</h2></header>
            <table>
              <caption>Table Caption</caption>
              <thead>
@@ -174,7 +266,7 @@
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="text__code">
-            <header><h1>Code</h1></header>
+            <header><h2>Code</h2></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>
@@ -191,7 +283,7 @@
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
          <article id="text__inline">
-            <header><h1>Inline elements</h1></header>
+            <header><h2>Inline elements</h2></header>
            <div>
              <p><a href="#!">This is a text link</a>.</p>
              <p><strong>Strong is used to indicate strong importance.</strong></p>
@@ -203,7 +295,7 @@
              <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><small>This small text is small 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>
@@ -214,25 +306,48 @@
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
+          <article id="text__comments">
+            <header><h2>HTML Comments</h2></header>
+            <div>
+              <p>There is comment here: <!--This comment should not be displayed--></p>
+              <p>There is a comment spanning multiple tags and lines below here.</p>
+              <!--<p><a href="#!">This is a text link. But it should not be displayed in a comment</a>.</p>
+              <p><strong>Strong is used to indicate strong importance. But, it should not be displayed in a comment</strong></p>
+              <p><em>This text has added emphasis. But, it should not be displayed in a comment</em></p>-->
+            </div>
+            <footer><p><a href="#top">[Top]</a></p></footer>
+          </article>
        </section>
-
        <section id="embedded">
-          <header><h1>Embedded content</h1></header>
+          <header><h2>Embedded content</h2></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>
+              <h3>Plain <code>&lt;img&gt;</code> element</h3>
+              <p><img src="https://placekitten.com/480/480" alt="Photo of a kitten"></p>
+              <h3><code>&lt;figure&gt;</code> element with <code>&lt;img&gt;</code> element</h3>
+              <figure><img src="https://placekitten.com/420/420" alt="Photo of a kitten"></figure>
+              <h3><code>&lt;figure&gt;</code> element with <code>&lt;img&gt;</code> and <code>&lt;figcaption&gt;</code> elements</h3>
              <figure>
-                <img src="http://placekitten.com/420/420" alt="Image alt text">
+                <img src="https://placekitten.com/420/420" alt="Photo of a kitten">
                <figcaption>Here is a caption for this image.</figcaption>
              </figure>
+              <h3><code>&lt;figure&gt;</code> element with a <code>&lt;picture&gt;</code> element</h3>
+              <figure>
+                <picture>
+                  <source srcset="https://placekitten.com/800/800"
+                    media="(min-width: 800px)">
+                  <img src="https://placekitten.com/420/420" alt="Photo of a kitten" />
+                </picture>
+              </figure>
            </div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
+          <article id="embedded__bgimages">
+            <header><h2>Background images</h2></header>
+            <div style="background-image:url('https://placekitten.com/300/300'); width:300px; height: 300px;"></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>
@@ -268,9 +383,19 @@
            <div><iframe src="index.html" height="300"></iframe></div>
            <footer><p><a href="#top">[Top]</a></p></footer>
          </article>
+          <article id="embedded__embed">
+            <header><h2>Embed</h2></header>
+            <div><embed src="index.html" height="300"></div>
+            <footer><p><a href="#top">[Top]</a></p></footer>
+          </article>
+          <article id="embedded__object">
+            <header><h2>Object</h2></header>
+            <div><object data="index.html" height="300"></object></div>
+            <footer><p><a href="#top">[Top]</a></p></footer>
+          </article>
        </section>
        <section id="forms">
-          <header><h1>Form elements</h1></header>
+          <header><h2>Form elements</h2></header>
          <form>
            <fieldset id="forms__input">
              <legend>Input fields</legend>
@@ -284,7 +409,7 @@
              </p>
              <p>
                <label for="input__webaddress">Web Address</label>
-                <input id="input__webaddress" type="url" placeholder="http://yoursite.com">
+                <input id="input__webaddress" type="url" placeholder="https://yoursite.com">
              </p>
              <p>
                <label for="input__emailaddress">Email Address</label>
@@ -303,12 +428,8 @@
                <input id="input__text2" type="number" placeholder="Enter a Number">
              </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">
+                <label for="input__file">File Input</label>
+                <input id="input__file" type="file">
              </p>
            </fieldset>
            <p><a href="#top">[Top]</a></p>
@@ -324,11 +445,21 @@
                  </optgroup>
                </select>
              </p>
+              <p>
+                <label for="select_multiple">Select (multiple)</label>
+                <select id="select_multiple" multiple="multiple">
+                  <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">
+              <ul>
                <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>
@@ -337,10 +468,10 @@
            <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>
+                <li><label for="radio1"><input id="radio1" name="radio" type="radio" checked="checked"> Option 1</label></li>
+                <li><label for="radio2"><input id="radio2" name="radio" type="radio"> Option 2</label></li>
+                <li><label for="radio3"><input id="radio3" name="radio" type="radio"> Option 3</label></li>
              </ul>
            </fieldset>
            <p><a href="#top">[Top]</a></p>
@@ -386,6 +517,15 @@
                <label for="idtl">Datetime-local input</label>
                <input type="datetime-local" id="idtl" value="1970-01-01T00:00">
              </p>
+              <p>
+                <label for="idl">Datalist</label>
+                <input type="text" id="idl" list="example-list">
+                <datalist id="example-list">
+                  <option value="Example #1" />
+                  <option value="Example #2" />
+                  <option value="Example #3" />
+                </datalist>
+              </p>
            </fieldset>
            <p><a href="#top">[Top]</a></p>
            <fieldset id="forms__action">
@@ -407,7 +547,7 @@
          </form>
        </section>
      </main>
-      <footer role="contentinfo">
+      <footer>
        <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>
--- a/package-lock.json
+++ b/package-lock.json
@@ -0,0 +1,5 @@
+{
+  "name": "html5-test-page",
+  "version": "0.8.0",
+  "lockfileVersion": 1
+}
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "html5-test-page",
-  "version": "0.7.1",
+  "version": "0.9.7",
  "description": "A page filled with common HTML elements to be used for testing purposes.",
  "main": "index.html",
  "scripts": {
Author	SHA1	Message	Date
Chris Bracco	714dc01c78	v0.9.7	2021-04-19 11:48:23 -04:00
Chris Bracco	9d912a6d7d	Merge pull request #40 from ConnorJamesLow/patch-1 Close option tags in datalist	2021-04-19 11:46:58 -04:00
Connor Low	8983ac1be5	Close option tags in datalist While your browser might be smart enough to figure it out, `<option>` tags can have children and need to be closed. Some apps/servers will have trouble with it otherwise (for example, this caused vitejs to crash).	2021-04-17 21:06:17 -07:00
Chris Bracco	90c0472293	v0.9.6	2021-04-03 16:01:35 -04:00
Chris Bracco	1c2a244555	Remove classes and valid/invalid inputs	2021-04-03 16:00:59 -04:00
Chris Bracco	931b8637d5	Merge pull request #39 from cbracco/issue/13-picture-element Add picture element	2021-04-03 15:54:44 -04:00
Chris Bracco	a0c969b93e	v0.9.5	2021-04-03 15:54:12 -04:00
Chris Bracco	d882dfcb48	Add picture element; Revise other image examples	2021-04-03 15:53:12 -04:00
Chris Bracco	e191677997	Merge pull request #27 from TomasHubelbauer/patch-1 Remove duped word	2021-04-03 15:45:24 -04:00
Chris Bracco	328c708a5e	v0.9.4	2021-04-03 15:44:00 -04:00
Chris Bracco	a557aa534e	Merge pull request #23 from gipsi/master Nu html checked	2021-04-03 15:42:26 -04:00
Chris Bracco	4e522a8e67	Merge branch 'master' into master	2021-04-03 15:42:06 -04:00
Chris Bracco	35cd96c06b	Merge pull request #38 from cbracco/racztiborzoltan-patch-1 Add multiple <select> example	2021-04-03 15:34:48 -04:00
Chris Bracco	4b6224d52e	v0.9.3	2021-04-03 15:34:01 -04:00
Chris Bracco	5218026335	Merge branch 'patch-1' of https://github.com/racztiborzoltan/html5-test-page into racztiborzoltan-patch-1 * 'patch-1' of https://github.com/racztiborzoltan/html5-test-page: add multiple select	2021-04-03 15:32:36 -04:00
Chris Bracco	e24e4b2b64	Merge pull request #37 from cbracco/charul97-1 Add nested lists	2021-04-03 15:31:04 -04:00
Chris Bracco	2e602b623d	v0.9.2	2021-04-03 15:29:41 -04:00
Chris Bracco	9780f2af62	Add nested lists	2021-04-03 15:29:25 -04:00
Chris Bracco	a65554bba1	Merge pull request #36 from cbracco/97arushisharma-horizontal-list Add background images example	2021-04-03 15:08:36 -04:00
Chris Bracco	7611bf513b	v0.9.1	2021-04-03 15:05:45 -04:00
Chris Bracco	9c92199a7e	Clean up BG image PR	2021-04-03 15:04:31 -04:00
97arushisharma	5cdb76d0fb	horizontal list and text color	2021-04-03 14:59:41 -04:00
Chris Bracco	a7b56dec9b	Add .editorconfig	2021-04-03 14:59:19 -04:00
Chris Bracco	8f241cf5f1	Merge pull request #35 from cbracco/jKratzik-master Add <details>, <address>, <object>, <embed>, <datalist>	2021-04-03 14:56:36 -04:00
Chris Bracco	1fecd23aa7	v0.9.0	2021-04-03 14:55:34 -04:00
Chris Bracco	66a77835cc	Remove <keygen>; Re-organize additions	2021-04-03 14:49:23 -04:00
jKratzik	ab4675eae5	Added a few elements address, details, embed, object, file input, datalist, keygen	2021-04-03 14:34:53 -04:00
Tomáš Hübelbauer	f3ee1b3575	Remove duped word	2020-04-05 08:46:46 +02:00
gipsi	b5cc38cc84	Nu html checked	2019-10-13 04:55:41 +01:00
Rácz Tibor Zoltán	a9fa7e0dfb	add multiple select	2018-09-18 02:22:13 +02:00
Chris Bracco	3b85be264e	v0.8.0	2018-03-19 16:18:21 -04:00
Chris Bracco	d4d5224177	Merge branch 'ep00ch-master' * ep00ch-master: Minor copy updates Added a section for testing comments	2018-03-19 16:16:23 -04:00
Chris Bracco	23c3d5f7c9	Minor copy updates	2018-03-19 16:15:55 -04:00
ep00ch	ffd3e00512	Added a section for testing comments	2018-03-16 17:19:15 +00:00