Html5 Elements Tester

HTML5 Elements Tester is a single-page HTML kitchen-sink designed to help developers test CSS resets and frameworks against a complete set of HTML5 elements.

What is the HTML5 Elements Tester?

A single-page HTML document that reproduces nearly all HTML5 elements in one place, organized by W3C HTML 5.2 categories: sections, grouping content, text-level semantics, edits, embedded content, tabular data, forms, interactive elements, and scripting. The page is authored by Alexander Sandberg and distributed under the MIT License. It takes no build dependencies: you download index.html, attach your own CSS, and open it in a browser.

Key Features

• Element coverage — includes over 100 elements across all HTML5 categories, matching MDN's element reference and organized per W3C HTML 5.2 section 4.
• CSS reset and framework previews — since v1.1.0, the page can apply popular resets (Eric Meyer's 2.0, normalize.css, sanitize.css, Reboot, Remedy, and more) and frameworks (Bootstrap, Bulma, Tailwind, Foundation, Tachyons, Water.css, and others) with a single click.
• Custom CSS injection — you can paste a direct URL to your own stylesheet and preview it on the same page, without editing the tester file.
• Copy-and-paste workflow — each element's markup is available directly in index.html, so you can copy snippets into your own projects rather than retyping.
• Fully static — no server, build step, or JavaScript framework; it's a plain HTML file that works offline.
• Extensible via GitHub issues — the author invites users to open issues when a favorite reset or framework is missing, and new options get added to the list.

Who is it for?

• CSS authors writing resets or frameworks, who need a reference page to verify how their styles affect every HTML element.
• Frontend developers evaluating a CSS framework quickly, who can load Tailwind, Bootstrap, Water.css, or others and inspect rendering immediately.
• Design system maintainers who need to validate component markup against full HTML semantics.
• Students learning HTML who want a comprehensive visual reference of what each element looks like with a given stylesheet.

What can you do with the HTML5 Elements Tester?

• Compare resets side by side — switch between normalize.css and Eric Meyer's reset and see how heading margins, list styles, and form controls differ.
• Test your own CSS on every element — paste a direct link to your stylesheet and view all elements rendered under it.
• Extract element snippets — copy the markup for a form or table from index.html and reuse it in your own pages.
• Evaluate a framework's default styling — load Bulma or Tachyons and instantly see how the framework handles inline elements, embedded media, and interactive widgets.

How does the HTML5 Elements Tester work?

The page is a plain HTML document. To use it, download index.html, include the stylesheet you want to test (either by linking it or by using the built-in preview list for popular resets/frameworks), and open the file in any modern browser. The built-in preview option accepts a direct URL to a CSS file, which the page fetches and applies live to the element samples.

FAQ

Is the HTML5 Elements Tester free?

Yes, the project is open source and distributed under the MIT License. You can download, modify, and reuse the test page without restriction, provided you keep the license notice.

Which resets and frameworks are included?

The page lists 9 resets and 18 frameworks, including normalize.css, Eric Meyer's reset, sanitize.css, Bootstrap, Bulma, Tailwind, Foundation, Tachyons, Water.css (light and dark), and Tufte. You can preview any of these by selecting it on the page.

Can I use my own CSS with this tester?

Yes. Since version 1.1.0, the page supports pasting a direct link to your own custom CSS file. The page will load that stylesheet and apply it to all the shown elements.

How do I copy an element's HTML?

Open index.html in a text editor, locate the element you need (for example, the form section), copy its markup, and paste it into your own document. The page is structured so each element's code is directly readable.

Does the page work offline?

Yes, index.html is a single static file with no external dependencies. Once you've downloaded it, you can open it in a browser with or without internet access; the only exception is the preview feature, which needs a connection to fetch external CSS URLs.