<!-- based on https://github.com/alexandersandberg/html5-elements-tester -->
<link rel="stylesheet" id="stylesheet">
<a href="#main">Skip to main content</a>
<aside id="css-selection">
<div>
<label for="select-css">Select framework</label>
<select name="select-css" id="select-css">
<option value="">No CSS (browser defaults)</option>
<optgroup label="CSS Frameworks" id="select-css-frameworks">
</optgroup>
</select>
<div><em>% <a href="https://github.com/alexandersandberg/html5-elements-tester">HTML elements</a> styled</em>: <span id="total-coverage"></span></div>
</div>
</aside>
<header>
<h1>Classless CSS Framework explorer</h1>
<p>A test page for CSS frameworks showing examples and coverage info (what HTML elements are styled). <a href="https://www.skypack.dev/blog/2021/03/the-best-classless-css-frameworks-in-2021/">Read the post about classless frameworks at the Skypack Blog.</a></p>
<p>Forked from <a href="https://github.com/alexandersandberg/html5-elements-tester">HTML5 elements tester</a>. </p>
<div>
<h2>Use this framework in your own code:</h2>
<pre><code id="code-snippet-style">No framework selected</code></pre>
</div>
</header>
<main id="main">
<nav id="nav">
<h2>Navigation</h2>
<ul>
<li><a href="#sections">Sections</a></li>
<li><a href="#grouping-content">Grouping content</a></li>
<li><a href="#text-level-semantics">Text-level semantics</a></li>
<li><a href="#edits">Edits</a></li>
<li><a href="#embedded-content">Embedded content</a></li>
<li><a href="#tabular-data">Tabular data</a></li>
<li><a href="#forms">Forms</a></li>
<li><a href="#interactive-elements">Interactive elements</a></li>
<li><a href="#scripting">Scripting</a></li>
<li><a href="#coverage-table">Coverage info</a></li>
</ul>
</nav>
<section id="sections">
<header>
<h2>Sections</h2>
<p>Elements: <code><body></code>, <code><article></code>, <code><section></code>, <code><nav></code>, <code><aside></code>, <code><h1>β<h6></code>, <code><header></code>, <code><footer></code></p>
</header>
<article>
<header>
<h3><code><h1>β<h6></code>:</h3>
</header>
<!--
Note that, in this context, this use of <h*>s is not of appropriate
(accessible) rank, but used for testing purposes.
-->
<h1><code><h1></code> A unique title, specific for the page</h1>
<h2><code><h2></code> Heading levels should reflect structure, not style</h2>
<p>It can also be useful to test how body text below a heading appears on the page, for example to check the margin. This text is wrapped in <p> and is a direct sibling to the above <h2>.</p>
<h3><code><h3></code> If you need a visually smaller title, use CSS</h3>
<p>To create a semantically correct HTML structure that's accessible for everyone, make sure you're nesting the headings correctly. Never use more than one <h1> per page, and don't skip heading levels.</p>
<h4><code><h4></code> Headings below level 4 are not used as much</h4>
<h5><code><h5></code> But that doesn't mean you should forget about them</h5>
<h6><code><h6></code> And last, but not least, the heading with the lowest rank</h6>
</article>
<article id="article">
<header id="header">
<h3><code><body> + <article> + <section> + <nav> + <aside> + <header> + <footer></code>:</h3>
</header>
<p>All these tags are already in use on the page. The list below contains links to each use case. See the source code of this file for more details.</p>
<ul>
<li><a href="#body"><code><body></code></a></li>
<li><a href="#article"><code><article></code></a></li>
<li><a href="#sections"><code><section></code></a></li>
<li><a href="#nav"><code><nav></code></a></li>
<li><a href="#aside"><code><aside></code></a></li>
<li><a href="#header"><code><header></code></a></li>
<li><a href="#footer"><code><footer></code></a></li>
</ul>
</article>
<footer id="footer">
<a href="#body">Back to top π</a>
</footer>
</section>
<section id="grouping-content">
<header>
<h2>Grouping content</h2>
<p>Elements: <code><p></code>, <code><address></code>, <code><hr></code>, <code><pre></code>, <code><blockquote></code>, <code><ol></code>, <code><ul></code>, <code><li></code>, <code><dl></code>, <code><dt></code>, <code><dd></code>, <code><figure></code>, <code><figcaption></code>, <code><main></code>, <code><div></code></p>
</header>
<article>
<header>
<h3><code><p></code>:</h3>
</header>
<p>Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields. [1]</p>
</article>
<article>
<header>
<h3><code><address></code>:</h3>
</header>
<address>
Name: Alexander Sandberg<br>
Street adress: 1 Rover street<br>
State: N/A<br>
Planet: Mars<br>
Digital home: <a href="https://alexandersandberg.com">alexandersandberg.com</a><br>
</address>
</article>
<article>
<header>
<h3><code><hr></code>:</h3>
</header>
<hr>
</article>
<article>
<header>
<h3><code><pre></code>:</h3>
</header>
<pre>Preformatted text
will be presented
exactly as written
in the HTML file.
</pre>
</article>
<article>
<header>
<h3><code><blockquote></code>:</h3>
</header>
<blockquote>
<p>The text inside this blockquote is wrapped in <code><p></code> tags. Sometimes the quote is really long, and possibly have to occupy multiple lines, but that shouldn't be a problem.</p>
</blockquote>
</article>
<article>
<header>
<h3><code><ol> + <ul> + <li></code>:</h3>
</header>
<ol>
<li>List item 1</li>
<li>List item 2
<ol>
<li>List item 1</li>
</ol>
</li>
<li>List item 3
<ul>
<li>List item 1</li>
<li>List item 2
<ul>
<li>List item 1
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
</li>
<li>List item 2</li>
</ul>
</li>
<li>List item 3</li>
</ul>
</li>
<li>List item 4</li>
</ol>
<ul>
<li>List item 1
<ul>
<li>List item 1
<ul>
<li>List item 1</li>
</ul>
</li>
<li>List item 2</li>
</ul>
</li>
<li>List item 2</li>
<li>List item 3
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
</li>
</ul>
</article>
<article>
<header>
<h3><code><dl> + <dt> + <dd></code>:</h3>
</header>
<dl>
<dt>This is a term</dt>
<dd>And this is the accompanying description, explaining the above term.</dd>
<dd>You can also have multiple descriptions (<code><dt></code>), like this one, for each term (<code><dt></code>).</dd>
<dd>And why not nest lists inside this description?
<dl>
<dt>Another term</dt>
<dd>With some description.</dd>
</dl>
<ul>
<li>List item 1</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
</dd>
</dl>
</article>
<article>
<header>
<h3><code><figure> + <figcaption></code>:</h3>
</header>
<p>Used with an <code><img></code>:</p>
<figure>
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 300' width='600' height='300'%3E%3Crect width='600' height='300' fill='%2300a3d7'%3E%3C/rect%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='monospace' font-size='26px' fill='%23000000'%3Eimg%3C/text%3E%3C/svg%3E" alt="Dummy image, just says img on a blue background">
<figcaption>Dummy img generated by <a href="https://codepen.io/andreasnylin/full/PgGxQv">SVG Placeholder Image Generator</a></figcaption>
</figure>
<p>Used with a <code><blockquote></code>:</p>
<figure>
<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>
</blockquote>
<figcaption>
<cite><a href="#!">Said no one, ever.</a></cite>
</figcaption>
</figure>
</article>
<article>
<header>
<h3><code><main></code>:</h3>
</header>
<p>See the <a href="#main">main content</a> of this page for a use case of <code><main></code>.</p>
</article>
<article>
<header>
<h3><code><div></code>:</h3>
</header>
<div>
<p>This paragraph of text is contained inside a <code><div></code>. The element really has no special meaning, other than grouping content together, and should be used as a last resort when no other element is suitable.</p>
</div>
</article>
<footer>
<a href="#body">Back to top π</a>
</footer>
</section>
<section id="text-level-semantics">
<header>
<h2>Text-level semantics</h2>
<p>Elements: <code><a></code>, <code><em></code>, <code><strong></code>, <code><small></code>, <code><s></code>, <code><cite></code>, <code><q></code>, <code><dfn></code>, <code><abbr></code>, <code><ruby></code>, <code><rb></code>, <code><rt></code>, <code><rtc></code>, <code><rp></code>, <code><data></code>, <code><time></code>, <code><code></code>, <code><var></code>, <code><samp></code>, <code><kbd></code>, <code><sub></code>, <code><sup></code>, <code><i></code>, <code><b></code>, <code><u></code>, <code><mark></code>, <code><bdi></code>, <code><bdo></code>, <code><span></code>, <code><br></code>, <code><wbr></code></p>
</header>
<article id="a">
<header>
<h3><code><a></code>:</h3>
</header>
<p>Here is <a href="#a">a link</a> inside a paragraph of text. Below you can find a list of links with different <code>href</code> attributes.</p>
<ul>
<li><a href="https://github.com/alexandersandberg/html5-elements-tester">Link to an external website</a></li>
<li><a href="#a">Anchor link to this element</a></li>
<li><a href="">Link with an empty <code>href</code> attribute</a></li>
<li><a>Link missing an <code>href</code> attribute</a></li>
</ul>
</article>
<article>
<header>
<h3><code><em> + <i> + <strong> + <b></code>:</h3>
</header>
<p>The <code><em></code> element represents <em>stress emphasis</em> of its contents. Meanwhile, <code><i></code> is since HTML5 used for text in an alternative voice or mood, or otherwise offset from the <i>normal prose</i>, as you may define it.</p>
<p>If you want to <b>draw attention</b> to some text, feel free to use <code><b></code>. However, if you want to mark the importance of something, <strong>you should use <code><strong></code></strong>.</p>
</article>
<article>
<header>
<h3><code><small> + <u> + <mark> + <s></code>:</h3>
</header>
<p><small>When you want your text to represent small print, use <code><small></code>.</small></p>
<p>In most cases, there's a better element than <code><u></code> to use, but it can be useful for labelling <u>msispelt</u> text. Avoid using it, however, where the text could be confused for a hyperlink.</p>
<p>You can <mark>highlight text</mark> for reference purposes with <code><mark></code>, or if the contents is <s>no longer accurate or relevant</s>, wrap it with <code><s></code>.</p>
</article>
<article>
<header>
<h3><code><abbr> + <dfn></code>:</h3>
</header>
<p>By wrapping an abbreviation like <dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> in both <code><dfn></code> and <code><abbr></code>, we define the term. This can later be used only using <code><abbr></code>, since we already defined <abbr title="Cascading Style Sheets">CSS</abbr> once before.</p>
</article>
<article>
<header>
<h3><code><q> + <cite> + <data> + <time></code>:</h3>
</header>
<p>When citing creative work, include the reference with a <code><cite></code> element. <cite>www.w3.org</cite> explains that <q>A citation is not a quote (for which the <code><q></code> element is appropriate)</q> instead, like used here.</p>
<p>If you want to link content with a <data value="123">machine-readable</data> translation, use <code><data></code> with a <code>value</code> attribute. However, if this data is a time- or date-related, like the date <time datetime="2019-07-04">July 4</time>, you have to use <code><time></code> together with the <code>datatime</code> attribute.</p>
</article>
<article>
<header>
<h3><code><code> + <var> + <samp> + <kbd> + <sub> + <sup></code>:</h3>
</header>
<p>When sharing code-snippets, make sure to use the <code><code></code> element. This can be done both <code>display: inline;</code>, as well as block-level:</p>
<pre><code>* {
color: rebeccapurple;
background: aliceblue;
}</code></pre>
<p>Variables should be surrounded by <code><var></code>, or <var>x</var> amount of people might be confused.</p>
<p>Sample or quotes output are represented with <code><samp></code>: <samp>Your expression '1 + 1' equals 2</samp>.</p>
<p>To represent user input, like the shortcut <kbd><kbd>Cmd</kbd> + <kbd>R</kbd></kbd> on macOS, use <code><kbd></code>.</p>
<p>If you want to <sub>subscript</sub> or <sup>superscript</sup> text, use <code><sub></code> or <code><sup></code>.</p>
</article>
<article>
<header>
<h3><code><bdi> + <bdo> + <ruby> + <rb> + <rt> + <rtc> + <rp></code>:</h3>
</header>
<p>Consider using <code><bdi></code> when working with bidirectional content, like the names <bdi>Alexander</bdi> and <bdi>ΨΉΩΩβ</bdi>.</p>
<p>If you need to override the bidirectional algorithm for some content and its children, use <code><bdo></code>:</p>
<p><bdo dir="rtl">Don't forget to specify the <code>dir</code> attribute!</bdo></p>
<p><bdo dir="ltr">I said, don't forget to specify the <code>dir</code> attribute!</bdo></p>
<p>Some use of <code><ruby></code> and its related elements:</p>
<ruby>
ζΌ’ <rp>(</rp>
<rt>Kan</rt>
<rp>)</rp>
ε <rp>(</rp>
<rt>ji</rt>
<rp>)</rp>
</ruby>
<br>
<ruby>
<rb>ζ§<rb>ι<rb>ε±±<rt>jiΓΉ
<rt>jΔ«n
<rt>shΔn<rtc>San Francisco
</ruby>
<p>More information about the explanation and usage of these can be <a href="https://www.w3.org/TR/2017/REC-html52-20171214/single-page.html#the-ruby-element" target="_blank">read here on www.w3.org</a>.</p>
</article>
<article>
<header>
<h3><code><span> + <br> + <wbr></code>:</h3>
</header>
<p>A <code><span></code> can be used to mark up inline text for various uses, <span style="font-weight: bolder;">here to make the text bolder</span>.</p>
<p>If you have really long text you might want to insert a<br>blank line with the <code><br></code> element. You can also insert word breaking opportunities using <code><wbr></code>, to help the browser break long words like Pneumonoultramicro<wbr>scopicsilico<wbr>volcanoconiosis.
</p>
</article>
<footer>
<a href="#body">Back to top π</a>
</footer>
</section>
<section id="edits">
<header>
<h2>Edits</h2>
<p>Elements: <code><ins></code>, <code><del></code></p>
</header>
<article>
<header>
<h3><code><ins> + <del></code>:</h3>
</header>
<p>If you make a <del>really huge</del> mistake, you can always go back and fix it later. <ins>And don't forget to learn from your mistake.</ins></p>
<ins>
<p>Both <code><ins></code> and <code><del></code> can be block-level, like this.</p>
</ins>
<del>
<p>Here's a block-level paragraph removal.</p>
</del>
</article>
<footer>
<a href="#body">Back to top π</a>
</footer>
</section>
<section id="embedded-content">
<header>
<h2>Embedded content</h2>
<p>Elements: <code><picture></code>, <code><source></code>, <code><img></code>, <code><iframe></code>, <code><embed></code>, <code><object></code>, <code><param></code>, <code><video></code>, <code><audio></code>, <code><track></code>, <code><map></code>, <code><area></code>, <code><math></code>, <code><svg></code></p>
</header>
<article>
<header>
<h3><code><img> + <svg></code>:</h3>
</header>
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 300' width='600' height='300'%3E%3Crect width='600' height='300' fill='%2300a3d7'%3E%3C/rect%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='monospace' font-size='26px' fill='%23000000'%3Eimg%3C/text%3E%3C/svg%3E" alt="dummy image, says img on a blue background">
<svg height="250" width="510">
<polygon points="220,10 300,210 200,245 123,234" style="fill:tomato;stroke:rebeccapurple;stroke-width:5" />
This is a fallback message. If you see this, your browser does not support inline SVG.
</svg>
</article>
<article>
<header>
<h3><code><picture> + <source></code>:</h3>
</header>
<p>A different image will be shown depending on viewport size.</p>
<picture>
<source srcset="https://dummyimage.com/800x400/000/fff" media="(min-width: 1200px)">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' width='400' height='300'%3E%3Crect width='400' height='300' fill='%2300a3d7'%3E%3C/rect%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' font-family='monospace' font-size='26px' fill='%23000000'%3Eimg small%3C/text%3E%3C/svg%3E" alt="Blue square dummy image">
</picture>
</article>
<article>
<header>
<h3><code><iframe></code>:</h3>
</header>
<iframe src="https://maps.google.com/maps?width=100%&height=600&hl=en&q=New%20york+(HTML5%20Elements%20Tester)&ie=UTF8&t=k&z=14&iwloc=B&output=embed"></iframe>
</article>
<article>
<header>
<h3><code><embed></code>:</h3>
</header>
<embed src="" type="video/webm">
</article>
<article>
<header>
<h3><code><object> + <param></code>:</h3>
</header>
<object data="" type="application/pdf">
<param name="parameter" value="example">
</object>
</article>
<article>
<header>
<h3><code><video> + <audio> + <track></code>:</h3>
</header>
<audio controls="">audio</audio>
<video controls="">video</video>
</article>
<article>
<header>
<h3><code><map> + <area></code>:</h3>
</header>
<p>Each side of the image below is linked to different anchors on this page. Give it a try!</p>
<map name="image-map" id="image-map">
<area shape="circle" coords="75,75,75" href="#image-map">
<area shape="circle" coords="275,75,75" href="#body">
</map>
</article>
<article>
<header>
<h3><code><math></code>:</h3>
</header>
<p>The quadratic formula is:<br>
<math>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mo form="prefix">-</mo>
<mi>b</mi>
<mo>Β±</mo>
<msqrt>
<msup>
<mi>b</mi>
<mn>2</mn>
</msup>
<mo>-</mo>
<mn>4</mn>
<mo>β’</mo>
<mi>a</mi>
<mo>β’</mo>
<mi>c</mi>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mo>β’</mo>
<mi>a</mi>
</mrow>
</mfrac>
</math>
</p>
</article>
<footer>
<a href="#body">Back to top π</a>
</footer>
</section>
<section id="tabular-data">
<header>
<h2>Tabular data</h2>
<p>Elements: <code><table></code>, <code><caption></code>, <code><colgroup></code>, <code><col></code>, <code><tbody></code>, <code><thead></code>, <code><tfoot></code>, <code><tr></code>, <code><td></code>, <code><th></code></p>
</header>
<article>
<header>
<h3><code><table> + <caption> + <colgroup> + <col>+ <tbody> + <thead> + <tfoot> + <tr> + <td> + <th></code>:</h3>
</header>
<table>
<caption>This is the table caption</caption>
<colgroup>
<col>
<col span="2">
<col span="1">
</colgroup>
<thead>
<tr>
<th><code><thead></code></th>
<th>2nd colgroup</th>
<th>2nd colgroup</th>
<th>3rd colgroup</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><code><tbody></code></th>
<td colspan="2">This is a cell spanning two columns</td>
<td>Last column</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row"><code><tfoot></code></th>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tfoot>
</table>
</article>
<footer>
<a href="#body">Back to top π</a>
</footer>
</section>
<section id="forms">
<header>
<h2>Forms</h2>
<p>Elements: <code><form></code>, <code><label></code>, <code><input></code>, <code><button></code>, <code><select></code>, <code><datalist></code>, <code><optgroup></code>, <code><option></code>, <code><textarea></code>, <code><output></code>, <code><progress></code>, <code><meter></code>, <code><fieldset></code>, <code><legend></code></p>
</header>
<article>
<header>
<h3><code><form> + <label> + <input> + <button> + <select> + <datalist> + <optgroup> + <option> + <textarea> + <fieldset> + <legend></code>:</h3>
</header>
<form action="#forms">
<fieldset>
<legend>Welcome to the form</legend>
<p>
<label for="input-hidden">
Hidden: <input type="hidden" id="input-hidden">
</label>
</p>
<p>
<label for="input-text">
Text: <input type="text" id="input-text">
</label>
</p>
<p>
<label for="input-text-readonly">
Text (readonly): <input type="text" id="input-text-readonly" value="You can't change this" readonly>
</label>
</p>
<p>
<label for="input-text-disabled">
Text (disabled): <input type="text" id="input-text-disabled" value="This is not available" disabled>
</label>
</p>
<p>
<label for="input-search">
Search: <input type="search" id="input-search">
</label>
</p>
<p>
<label for="input-tel">
Telephone: <input type="tel" id="input-tel">
</label>
</p>
<p>
<label for="input-url">
URL: <input type="url" id="input-url">
</label>
</p>
<p>
<label for="input-email">
Email: <input type="email" id="input-email">
</label>
</p>
<p>
<label for="input-password">
Password: <input type="password" id="input-password">
</label>
</p>
<p>
<label for="input-date">
Date: <input type="date" id="input-date">
</label>
</p>
<p>
<label for="input-month">
Month: <input type="month" id="input-month">
</label>
</p>
<p>
<label for="input-week">
Week: <input type="week" id="input-week">
</label>
</p>
<p>
<label for="input-time">
Time: <input type="time" id="input-time">
</label>
</p>
<p>
<label for="input-datetime-local">
Datetime-local: <input type="datetime-local" id="input-datetime-local">
</label>
</p>
<p>
<label for="input-number">
Number: <input type="number" id="input-number">
</label>
</p>
<p>
<label for="input-range">
Range: <input type="range" id="input-range">
</label>
</p>
<p>
<label for="input-color">
Color: <input type="color" id="input-color">
</label>
</p>
<p>
<label for="input-checkbox-1">
Checkbox 1: <input type="checkbox" id="input-checkbox-1" name="checkbox">
</label>
<label for="input-checkbox-2">
Checkbox 2: <input type="checkbox" id="input-checkbox-2" name="checkbox">
</label>
<label for="input-checkbox-3">
Checkbox 3 (disabled): <input type="checkbox" id="input-checkbox-3" name="checkbox" disabled>
</label>
</p>
<p>
<label for="input-radio-1">
Radio 1: <input type="radio" id="input-radio-1" name="radio">
</label>
<label for="input-radio-2">
Radio 2: <input type="radio" id="input-radio-2" name="radio">
</label>
<label for="input-radio-3">
Radio 3 (disabled): <input type="radio" id="input-radio-3" name="radio" disabled>
</label>
</p>
<p>
<label for="select">
Select: <select name="select" id="select">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</label>
</p>
<p>
<label for="select-size">
Select (size): <select name="select-size" id="select-size" size=5>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
</select>
</label>
</p>
<p>
<label for="select-multiple">
Select (multiple): <select name="select-multiple" id="select-multiple" multiple>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</label>
</p>
<p>
<label for="select-optgroup">
Select with optgroup: <select name="select-optgroup" id="select-optgroup">
<optgroup label="Group 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</optgroup>
<optgroup label="Group 2">
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</optgroup>
</select>
</label>
</p>
<p>
<label for="datalist">
Datalist:
<input name="datalist" list="datalist">
<datalist id="datalist">
<option value="Option 1">
<option value="Option 2">
<option value="Option 3">
<option value="Option 4">
</datalist>
</label>
</p>
<p>
<label for="textarea">
Textarea: <textarea name="textarea" id="textarea"></textarea>
</label>
</p>
<p>
<label for="input-file">
File (single): <input type="file" id="input-file">
</label>
</p>
<p>
<label for="input-file-multiple">
File (multiple): <input type="file" id="input-file-multiple" multiple>
</label>
</p>
<p>
<label for="input-submit">
Submit: <input type="submit" id="input-submit">
</label>
</p>
<p>
<label for="input-image">
Image button: <input type="image" id="input-image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 50' width='150' height='50'%3E%3Crect width='150' height='50' fill='%23cccccc'%3E%3C/rect%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' %3Ebutton%3C/text%3E%3C/svg%3E">
</label>
</p>
<p>
<label for="input-reset">
Reset: <input type="reset" id="input-reset">
</label>
</p>
<p>
<label for="input-button">
Button: <input type="button" id="input-button" value="I'm an input with type=button">
</label>
</p>
<p>
<button type="button">I'm a <code><button></code></button>
</p>
</fieldset>
</form>
</article>
<article>
<header>
<h3><code><output></code>:</h3>
</header>
<form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber">
<fieldset>
<legend>Testing the <code><output></code> element</legend>
<input name=a type=number step=any> +
<input name=b type=number step=any> =
<output name=o for="a b"></output>
<p>Code is taken from <a href="https://www.w3.org/TR/2017/REC-html52-20171214/single-page.html#example-5b22c23a" target="_blank">this example by W3</a>.</p>
</fieldset>
</form>
</article>
<article>
<header>
<h3><code><progress> + <meter></code>:</h3>
</header>
<form action="#forms">
<fieldset>
<legend>Testing <code><progress></code> and <code><meter></code></legend>
<p>
<label for="progress">
Progress: <progress id="progress" max="100" value="64">64%</progress>
</label>
</p>
<p>
<label for="meter-2">
Meter (ok): <meter id="meter-2" max="100" low="30" high="80" optimum="50" value="50">50/100</meter>
</label>
</p>
<p>
<label for="meter-1">
Meter (warning): <meter id="meter-1" max="100" low="30" high="80" optimum="50" value="20">20/100</meter>
</label>
</p>
<p>
<label for="meter-3">
Meter (critical): <meter id="meter-3" max="100" low="60" high="70" value="90">80/100</meter>
</label>
</p>
</fieldset>
</form>
</article>
<footer>
<a href="#body">Back to top π</a>
</footer>
</section>
<section id="interactive-elements">
<header>
<h2>Interactive elements</h2>
<p>Elements: <code><details></code>, <code><summary></code>, <code><dialog></code></p>
</header>
<article>
<header>
<h3><code><details> + <summary></code>:</h3>
</header>
<details>
<summary>This can be expanded</summary>
<p>And by doing so, more information is revealed.</p>
</details>
</article>
<article>
<header>
<h3><code><dialog></code>:</h3>
</header>
<dialog>
<p>This text is inside a <code><dialog></code> box! It should be hidden by default, and shown to the user when given an <code>open</code> attribute.</p>
</dialog>
</article>
<footer>
<a href="#body">Back to top π</a>
</footer>
</section>
<section id="scripting">
<header>
<h2>Scripting</h2>
<p>Elements: <code><script></code>, <code><noscript></code>, <code><template></code>, <code><canvas></code></p>
</header>
<article>
<header>
<h3><code><script> + <noscript></code>:</h3>
</header>
<p>Dynamic scripts and data blocks are included with the <code><script></code> element.</p>
<script>
document.write('<p>This paragraph was generated with JavaScript!</p>');
</script>
<p>If scripting is disabled when loading the page, content inside <code><noscript></code> is used instead.</p>
<noscript>
<p>I see you disabled JavaScript!</p>
</noscript>
</article>
<article>
<header>
<h3><code><template></code>:</h3>
</header>
<p>Below this paragraph, there's a <code><template></code> element containing a HTML declaration, that can be used by scripts.</p>
<template>
<p>Hi! I'm a paragraph inside the <code><template></code> element.</p>
</template>
</article>
<article>
<header>
<h3><code><canvas></code>:</h3>
</header>
<p>A <code><script></code> is used to draw a rectangle in the <code><canvas></code> below.</p>
<canvas id="canvas">
Alternative text explaining what's on display in this <canvas>.
</canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'tomato';
ctx.fillRect(10, 10, 100, 100);
</script>
</article>
<footer>
<a href="#body">Back to top π</a>
</footer>
</section>
<section id="coverage-table">
<h2>Coverage table</h2>
<table id="elements-table">
</table>
</section>
</main>
<aside id="aside">
<h2>About this project</h2>
<p>A test page containing most of the HTML5 elements that you'll ever need. Useful for testing CSS resets or CSS frameworks.</p>
<p>This section is inside an <code><aside></code> element.</p>
</aside>
<footer>
<p><a href="https://github.com/alexandersandberg/html5-elements-tester">HTML5 elements tester</a> by <a href="https://alexandersandberg.com">Alexander Sandberg</a> Β· <a href="#body">Back to top π</a></p>
</footer>#css-selection {
position: fixed;
right: 0;
background: #eee;
padding: 1em;
color: #1f1f1f;
max-width: 300px;
z-index: 1000000000;
}
const stylesheet = document.getElementById("stylesheet");
const selectCss = document.getElementById("select-css");
const selectCssResets = document.getElementById("select-css-resets");
const selectCssFrameworks = document.getElementById("select-css-frameworks");
const elementTable = document.getElementById("elements-table");
const totalCoverage = document.getElementById("total-coverage");
const codeSnippetStyle = document.getElementById("code-snippet-style");
const elements = [
"body",
"article",
"section",
"nav",
"aside",
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"p",
"address",
"hr",
"pre",
"blockquote",
"ol",
"ul",
"li",
"dl",
"dt",
"dd",
"figure",
"figcaption",
"main",
"div",
"a",
"em",
"strong",
"small",
"s",
"cite",
"q",
"dfn",
"abbr",
"ruby",
"rb",
"rt",
"rtc",
"rp",
"data",
"time",
"code",
"var",
"samp",
"kbd",
"sub",
"sup",
"i",
"b",
"u",
"mark",
"bdi",
"bdo",
"span",
"br",
"wbr",
"ins",
"del",
"picture",
"source",
"img",
"iframe",
"embed",
"object",
"param",
"video",
"audio",
"track",
"map",
"area",
"math",
"svg",
"table",
"caption",
"colgroup",
"col",
"tbody",
"thead",
"tfoot",
"tr",
"td",
"th",
"form",
"label",
"input",
"button",
"select",
"datalist",
"optgroup",
"option",
"textarea",
"output",
"progress",
"meter",
"fieldset",
"legend",
"details",
"summary",
"dialog",
"canvas"
];
const cssFrameworks = [
{
name: "spcss",
link:
"https://cdn.skypack.dev/-/spcss@v0.6.0-JYl19qYQ2VV1IGQPmbdD/dist=es2020,mode=raw/sp.min.css"
},
{
name: "New.css",
link:
"https://cdn.skypack.dev/-/@exampledev/new.css@v1.1.3-5lLJSVl1aUFQMjLSuoC5/dist=es2020,mode=raw/new.css"
},
{
name: "Latex.css",
link:
"https://cdn.skypack.dev/-/latex.css@v1.5.0-uICQMvoF5kssOEkJg6ns/dist=es2020,mode=raw/style.min.css"
},
{
name: "Awsm.css",
link:
"https://cdn.skypack.dev/-/awsm.css@v3.0.7-3IvcnwZt3VTcksna5Ha0/dist=es2020,mode=raw/dist/awsm.min.css"
},
{
name: "Axist",
link:
"https://cdn.skypack.dev/-/axist@v0.0.4-3F1u8JPxEDE6Sp9z2SQh/dist=es2020,mode=raw/dist/axist.min.css"
},
{
name: "MVP",
link: "https://cdn.skypack.dev/mvp.css"
},
{
name: "Tufte CSS",
link:
"https://cdn.skypack.dev/-/tufte-css@v1.7.2-g1wyqg4s9i8xXAct2gEy/dist=es2020,mode=raw/tufte.min.css"
},
{
name: "Sakura",
link:
"https://cdn.skypack.dev/-/sakura.css@v1.3.1-VmH2VZPA3IgYndF0s0Cx/dist=es2020,mode=raw/css/sakura.css"
},
{
name: "Holiday.css",
link:
"https://cdn.skypack.dev/-/holiday.css@v0.9.5-Jl4gV7y2zMps6H5ZtJC8/dist=es2020,mode=raw/dist/holiday.css"
},
{
name: "Marx",
link:
"https://cdn.skypack.dev/-/marx-css@v3.0.8-lSMr9ED7DVcTOJkQlHPR/dist=es2020,mode=raw/css/marx.min.css"
},
{
name: "Simpledotcss",
link:
"https://cdn.skypack.dev/-/simpledotcss@v1.0.0-iq1EIDtnpx4VjXOn5kG1/dist=es2020,mode=raw/simple.min.css"
}
];
const populateSelect = (list, target) => {
list.forEach((item) => {
const option = document.createElement("option");
option.textContent = item.name;
option.value = item.link;
target.appendChild(option);
});
};
const codeAdd = (url) => {
codeSnippetStyle.innerHTML = `<link rel="stylesheet" href="${url}" type="text/css">`;
};
populateSelect(cssFrameworks, selectCssFrameworks);
const changeCss = (link) => {
stylesheet.setAttribute("href", link);
};
const createRow = (text) => {
const td = document.createElement("td");
const input = document.createTextNode(text);
td.appendChild(input);
return td;
};
const changeTable = (link) => {
elementTable.innerHTML = "";
let total = 0;
let coverage = 0;
fetch(link).then(function (response) {
response.text().then(function (text) {
// console.log(text);
for (const element in elements) {
total++;
const tr = document.createElement("tr");
//create first row
elementName = createRow(elements[element]);
tr.appendChild(elementName);
/// test if text contains regex
const regex = new RegExp(elements[element] + "[{,:\\s]");
let status = "";
if (text.search(regex) > 0) {
status = "β
";
coverage++;
}
elementStatus = createRow(status);
tr.appendChild(elementStatus);
elementTable.appendChild(tr);
}
const coveragePercent = Math.round((coverage / total) * 100);
totalCoverage.innerHTML = coveragePercent + "%";
});
});
};
selectCss.addEventListener("change", (e) => {
changeCss(e.target.value);
changeTable(e.target.value);
codeAdd(e.target.value);
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.