HTML5 Test Page

HTML5 Test Page is a standalone HTML document that aggregates common HTML elements for visual regression testing while building CSS systems and frameworks.

What is HTML5 Test Page?

HTML5 Test Page is an open-source HTML document that contains a broad set of common HTML elements — headings, paragraphs, lists, links, forms, tables, embedded media, and more — intended to be rendered as-is to provide visual feedback when developing CSS systems and frameworks. It takes no input and produces no output; it is simply a static page you open in a browser to inspect how your styles affect each element. The project is maintained on GitHub by @cbracco and is based on the test file included in necolas's normalize.css project. It is published to npm under the package name html5-test-page, and the npm version badge on the repository page indicates active versioning.

Key Features

• Standalone HTML file — the page is a single .html document you can open directly in a browser, no build step or server required.
• Broad element coverage — HTML elements are loosely categorized as text, embedded content, or form elements, giving you a comprehensive visual reference.
• Based on normalize.css test file — the project inherits and expands the structure of the test.html file used in necolas's normalize.css, a popular CSS reset.
• Semantic Versioning — releases follow the major.minor.patch format; breaking changes bump major, new backward-compatible features bump minor, and bug fixes bump patch.
• Open-source contributions — the repository includes a Contributing guide and a License, so you can inspect, modify, and submit improvements.
• npm distribution — the package is available via npm, making it easy to include in front-end toolchains or fetch as a dependency.

Who is it for?

• CSS framework developers — use the page to test reset styles, base typography, and component classes across a wide range of elements in one view.
• Front-end designers — open the page in a browser to visually check how a design system handles edge-case elements like blockquotes, code blocks, and form controls.
• Theme builders — use the page as a style guide scaffold to verify that custom CSS themes render every standard HTML element consistently.
• QA testers — use the page as a baseline for visual regression testing after CSS changes by comparing screenshots before and after.

What can you do with HTML5 Test Page?

• CSS system validation: load the page in a browser with your stylesheet applied and instantly see how every common HTML element is styled.
• Visual regression testing: capture screenshots of the page at each release to detect unintended layout or styling changes.
• Style guide prototyping: turn the page into a quick style reference by adding your own CSS to the markup, then share the rendered result with teammates.
• Learning HTML semantics: study the categorized markup to see how common elements are structured and nested.